ui-fixes-branches-page (#10873)

* fix borderless commit lists

* fix paddings for PR previews

* feat(ui): truncate long PR titles in PRBranchView header to prevent overflow

Author: PavelLaptev

apps/desktop/src/components/BranchesView.svelte

@@ -364,7 +364,7 @@
 						{/if}
 
 						{#if isNonLocalPr && current.prNumber}
-							<div class="commits" use:focusable={{ vertical: true }}>
+							<div class="commits with-padding" use:focusable={{ vertical: true }}>
 								<BranchesViewPr
 									bind:this={prBranch}
 									{projectId}

apps/desktop/src/components/BranchesViewBranch.svelte

@@ -149,6 +149,8 @@
 
 <style lang="postcss">
 	.branch-commits {
-		border-top: 1px solid var(--clr-border-2);
+		overflow: hidden;
+		border: 1px solid var(--clr-border-2);
+		border-radius: 0 0 var(--radius-ml) var(--radius-ml);
 	}
 </style>

apps/desktop/src/components/PRBranchView.svelte

@@ -21,9 +21,13 @@
 
 <ReduxResult result={prQuery?.result} {projectId} {onerror}>
 	{#snippet children(pr)}
-		<Drawer testId={TestId.PRBranchDrawer} persistId="pr-branch-drawer-{projectId}-{pr.number}">
+		<Drawer
+			testId={TestId.PRBranchDrawer}
+			persistId="pr-branch-drawer-{projectId}-{pr.number}"
+			bottomBorder
+		>
 			{#snippet header()}
-				<h3 class="text-14 text-semibold">
+				<h3 class="text-14 text-semibold truncate">
 					<span class="clr-text-2">PR {unitSymbol}{pr.number}:</span>
 					<span> {pr.title}</span>
 				</h3>
@@ -65,7 +69,7 @@
 				</div>
 
 				{#if pr.body}
-					<div class="pr-body text-13">
+					<div class="pr-body text-13 text-body">
 						<Markdown content={pr.body} />
 					</div>
 				{/if}
@@ -78,13 +82,13 @@
 	.pr-content {
 		display: flex;
 		flex-direction: column;
-		gap: 16px;
 	}
 
 	.pr-request-data {
 		display: flex;
 		flex-direction: row;
 		width: 100%;
+		padding: 16px;
 		gap: 10px;
 	}
 
@@ -117,7 +121,7 @@
 	}
 
 	.pr-body {
-		padding-top: 16px;
+		padding: 16px;
 		border-top: 1px solid var(--clr-border-2);
 	}
 </style>