lane style updates

gitbutler-ui/src/routes/[projectId]/board/Board.svelte

@@ -205,9 +205,10 @@
 		flex-shrink: 1;
 		align-items: flex-start;
 		height: 100%;
-		padding: 0 var(--space-8);
+		/* padding: 0 var(--space-8); */
 		user-select: none;
 	}
+
 	.loading {
 		display: flex;
 		justify-content: center;

gitbutler-ui/src/routes/[projectId]/components/BranchCard.svelte

@@ -142,9 +142,13 @@
 	}
 </script>
 
-<div bind:this={rsViewport} class="branch-card resize-viewport" data-tauri-drag-region>
-	<ScrollableContainer>
-		<div style:width={`${laneWidth || $defaultBranchWidthRem}rem`} class="branch-card__contents">
+<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
+	<div
+		bind:this={rsViewport}
+		style:width={`${laneWidth || $defaultBranchWidthRem}rem`}
+		class="branch-card__contents"
+		class:first-child={branch.order == 0}
+	>
 		<BranchHeader
 			{readonly}
 			{branchController}
@@ -216,9 +220,7 @@
 								}}
 							/>
 						</div>
-							<h2 class="new-branch__title text-base-body-15 text-semibold">
-								This is a new branch.
-							</h2>
+						<h2 class="new-branch__title text-base-body-15 text-semibold">This is a new branch.</h2>
 						<p class="new-branch__caption text-base-body-13">
 							You can drag and drop files or parts of files here.
 						</p>
@@ -252,8 +254,6 @@
 			{branchCount}
 			{readonly}
 		/>
-		</div>
-	</ScrollableContainer>
 
 		<Resizer
 			viewport={rsViewport}
@@ -266,19 +266,40 @@
 				$defaultBranchWidthRem = laneWidth;
 			}}
 		/>
+	</div>
+
+	<slot name="file-view" />
 </div>
 
 <style lang="postcss">
-	.resize-viewport {
+	.branch-card {
 		height: 100%;
 		position: relative;
 		display: flex;
+		--target-branch-background: var(--clr-theme-container-pale);
+		display: flex;
+		/* flex-direction: column; */
+		user-select: none;
+		overflow-x: hidden;
+		overflow-y: scroll;
+		/* padding: 8px; */
+		/* border-radius: var(--radius-l); */
+		background-color: var(--target-branch-background);
+
+		/* remover scrollbar */
+
+		&::-webkit-scrollbar {
+			width: 0px;
+			background: transparent; /* Chrome/Safari/Webkit */
+		}
 	}
 
-	.branch-card {
-		display: flex;
-		flex-direction: column;
-		user-select: none;
+	.target-branch {
+		--target-branch-background: color-mix(
+			in srgb,
+			var(--clr-theme-scale-pop-60) 30%,
+			var(--clr-theme-container-pale)
+		);
 	}
 
 	.branch-card__dropzone-wrapper {
@@ -286,15 +307,15 @@
 	}
 
 	.branch-card__contents {
+		position: relative;
 		display: flex;
 		flex-direction: column;
-		padding-top: 20px;
 		gap: var(--space-4);
-		padding: var(--space-16) var(--space-8) var(--space-16) var(--space-8);
+		padding: var(--space-8);
 	}
 
-	.resize-viewport {
-		position: relative;
+	.first-child {
+		/* padding-left: var(--space-16); */
 	}
 
 	.new-branch__content {

gitbutler-ui/src/routes/[projectId]/components/BranchHeader.svelte

@@ -148,7 +148,7 @@
 	.header__wrapper {
 		z-index: 10;
 		position: sticky;
-		top: var(--space-16);
+		top: var(--space-8);
 	}
 	.header {
 		z-index: 2;
@@ -170,7 +170,7 @@
 		left: 0;
 		width: 100%;
 		height: var(--space-20);
-		background: var(--clr-theme-container-pale);
+		background: var(--target-branch-background);
 		/* background-color: red; */
 	}
 	.header__info {

gitbutler-ui/src/routes/[projectId]/components/BranchLane.svelte

@@ -49,8 +49,8 @@
 		{user}
 		{selectedFiles}
 		{githubService}
-	/>
-
+	>
+		<svelte:fragment slot="file-view">
 			{#if selected}
 				<FileCard
 					conflicted={selected.conflicted}
@@ -67,6 +67,8 @@
 					}}
 				/>
 			{/if}
+		</svelte:fragment>
+	</BranchCard>
 </div>
 
 <style lang="postcss">

gitbutler-ui/src/routes/[projectId]/components/FileCard.svelte

@@ -131,7 +131,6 @@
 			</div>
 		{/if}
 
-		<ScrollableContainer wide>
 		<div class="hunks">
 			{#if file.binary}
 				Binary content not shown
@@ -233,8 +232,6 @@
 				{/each}
 			{/if}
 		</div>
-		</ScrollableContainer>
-	</div>
 		<Resizer
 			viewport={rsViewport}
 			direction="right"
@@ -246,22 +243,26 @@
 				$defaultFileWidthRem = fileWidth;
 			}}
 		/>
+	</div>
 </div>
 
 <style lang="postcss">
 	.resize-viewport {
-		position: relative;
+		position: sticky;
+		top: 0;
 		display: flex;
 		height: 100%;
 		align-items: self-start;
 		overflow: hidden;
-		padding: var(--space-16) var(--space-6);
+		padding: var(--space-8) var(--space-8) var(--space-8) 0;
+		margin-left: calc(var(--space-4) * -1);
 	}
 	.file-card {
 		background: var(--clr-theme-container-light);
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
+		width: 100%;
 		max-height: 100%;
 	}
 	.hunks {