Add apdding to empty branch messages

- also refactors how to display border when scrollable container is scrolled

packages/ui/src/lib/components/ScrollableContainer.svelte

@@ -11,6 +11,7 @@
 	export let scrolled = false;
 	export let wide = false;
 	export let initiallyVisible = false;
+	export let showBorderWhenScrolled = false;
 
 	let observer: ResizeObserver;
 
@@ -28,7 +29,11 @@
 	onDestroy(() => observer.disconnect());
 </script>
 
-<div class="scrollable" style:flex-grow={wide ? 1 : 0}>
+<div
+	class="scrollable"
+	class:scrolled={showBorderWhenScrolled && scrolled}
+	style:flex-grow={wide ? 1 : 0}
+>
 	<div
 		bind:this={viewport}
 		on:scroll={(e) => {
@@ -62,4 +67,7 @@
 		display: block;
 		min-width: 100%;
 	}
+	.scrolled {
+		border-top: 1px solid var(--clr-theme-container-outline-light);
+	}
 </style>

packages/ui/src/routes/[projectId]/components/BranchCard.svelte

@@ -277,7 +277,7 @@
 		background: var(--clr-theme-container-light);
 		justify-content: center;
 		gap: var(--space-8);
-		padding: 0 var(--space-40);
+		padding: var(--space-24) var(--space-40);
 	}
 
 	.new-branch h1 {

packages/ui/src/routes/[projectId]/components/BranchCommits.svelte

@@ -18,7 +18,7 @@
 </script>
 
 {#if branch.commits.length > 0}
-	<ScrollableContainer bind:scrollable>
+	<ScrollableContainer bind:scrollable showBorderWhenScrolled>
 		<CommitList
 			{branch}
 			{base}

packages/ui/src/routes/[projectId]/components/BranchFiles.svelte

@@ -24,7 +24,6 @@
 	let scrollViewport: HTMLDivElement | undefined;
 	let rsViewport: HTMLElement;
 
-	let scrolled: boolean;
 	let scrollable: boolean | undefined;
 	let height: number | undefined = undefined;
 	let maxHeight: number | undefined;
@@ -46,7 +45,7 @@
 	</div>
 {/if}
 
-<div class="header" class:scrolled bind:this={headerElement}>
+<div class="header" bind:this={headerElement}>
 	<div class="header-title text-base-13 text-semibold">
 		<span>Changes</span>
 		<Badge count={branch.files.length} />
@@ -66,10 +65,10 @@
 >
 	{#if branch.files.length > 0}
 		<ScrollableContainer
+			showBorderWhenScrolled
 			bind:viewport={scrollViewport}
 			bind:maxHeight
 			bind:scrollable
-			bind:scrolled
 		>
 			<div class="scroll-container">
 				<!-- TODO: This is an experiment in file sorting. Accept or reject! -->
@@ -141,9 +140,6 @@
 		padding-left: var(--space-16);
 		padding-right: var(--space-12);
 		border-color: var(--clr-theme-container-outline-light);
-		&.scrolled {
-			border-bottom: 1px solid var(--clr-theme-container-outline-light);
-		}
 	}
 	.header-title {
 		display: flex;

packages/ui/src/routes/[projectId]/navigation/Branches.svelte

@@ -71,8 +71,6 @@
 	let observer: ResizeObserver;
 	let maxHeight: number;
 
-	let scrolled: boolean;
-
 	function filterByType(
 		branches: CombinedBranch[],
 		params: {
@@ -146,11 +144,7 @@
 				$height = Math.min(maxHeight, e.detail / (16 * $userSettings.zoom));
 			}}
 		/>
-		<BranchesHeader
-			{scrolled}
-			count={$filteredBranches$?.length ?? 0}
-			filtersActive={$filtersActive}
-		>
+		<BranchesHeader count={$filteredBranches$?.length ?? 0} filtersActive={$filtersActive}>
 			<FilterPopupMenu
 				slot="context-menu"
 				let:visible
@@ -164,7 +158,7 @@
 				on:action
 			/>
 		</BranchesHeader>
-		<ScrollableContainer bind:scrolled bind:viewport>
+		<ScrollableContainer bind:viewport showBorderWhenScrolled>
 			<div class="scroll-container">
 				<TextBox icon="filter" placeholder="Search" on:input={(e) => textFilter$.next(e.detail)} />
 				<div bind:this={contents} class="content">

packages/ui/src/routes/[projectId]/navigation/BranchesHeader.svelte

@@ -3,7 +3,6 @@
 	import Badge from '$lib/components/Badge.svelte';
 	import Button from '$lib/components/Button.svelte';
 
-	export let scrolled: boolean;
 	export let count: number | undefined;
 	export let filtersActive = false;
 
@@ -17,7 +16,7 @@
 	}
 </script>
 
-<div class="header" class:header-scrolled={scrolled}>
+<div class="header">
 	<div class="branches-title">
 		<span class="text-base-14 text-semibold">Branches</span>
 
@@ -57,9 +56,6 @@
 		transition: border-bottom var(--transition-fast);
 		position: relative;
 	}
-	.header-scrolled {
-		border-bottom: 1px solid var(--clr-theme-container-outline-light);
-	}
 	.filter-popup-menu {
 		position: absolute;
 		top: var(--space-48);