Fix settings UI by refactoring layout structure

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

@@ -17,7 +17,7 @@
 	export let grow = true;
 
 	// Width of resize handle when horizontal
-	export let width = 1;
+	export let width = 2;
 
 	// Height of resize handle when vertical
 	export let height = 1;

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

@@ -203,7 +203,7 @@
 	>
 		<div
 			bind:this={thumb}
-			class="absolute bg-black dark:bg-white"
+			class="absolute z-30 bg-black dark:bg-white"
 			style:width
 			style:opacity
 			style:top={`${thumbTop}px`}

packages/ui/src/routes/[projectId]/+layout.svelte

@@ -2,10 +2,8 @@
 	import type { LayoutData } from './$types';
 	import { getContext, onMount } from 'svelte';
 	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/settings/userSettings';
-	import { IconExternalLink } from '$lib/icons';
 	import { Code } from '$lib/backend/ipc';
 	import Resizer from '$lib/components/Resizer.svelte';
-	import { projectHttpsWarningBannerDismissed } from '$lib/config/config';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import IconChevronLeft from '$lib/icons/IconChevronLeft.svelte';
 	import { goto } from '$app/navigation';
@@ -35,8 +33,6 @@
 
 	const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
 
-	const httpsWarningBannerDismissed = projectHttpsWarningBannerDismissed(projectId);
-
 	$: sessionId = $sessionsStore?.length > 0 ? $sessionsStore[0].id : undefined;
 	$: updateDeltasStore(sessionId);
 
@@ -89,35 +85,7 @@
 					}));
 				}}
 			/>
-			<div class="flex w-full flex-col overflow-hidden">
-				{#if $baseBranchStore?.remoteUrl.startsWith('https') && !$httpsWarningBannerDismissed}
-					<div class="flex items-center bg-yellow-200/70 px-2 py-1 dark:bg-yellow-700/70">
-						<div class="flex flex-grow">
-							HTTPS remote detected. In order to push & fetch, you may need to&nbsp;
-							<a class="font-bold" href="/user"> set up </a>&nbsp;an SSH key (
-							<a
-								target="_blank"
-								rel="noreferrer"
-								class="font-bold"
-								href="https://docs.gitbutler.com/features/virtual-branches/pushing-and-fetching#the-ssh-keys"
-							>
-								docs
-							</a>
-							&nbsp;
-							<IconExternalLink class="h-4 w-4" />
-							).
-						</div>
-
-						<button on:click={() => httpsWarningBannerDismissed.set(true)}>Dismiss</button>
-					</div>
-				{/if}
-				<div
-					class="lane-scroll flex flex-grow gap-1 overflow-x-auto overflow-y-hidden overscroll-none transition-opacity duration-300"
-					style:opacity={peekTrayExpanded ? '0.5' : undefined}
-				>
-					<slot />
-				</div>
-			</div>
+			<slot />
 		</div>
 	{:else}
 		<div class="text-color-3 flex h-full w-full items-center justify-center">

packages/ui/src/routes/[projectId]/board/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { projectHttpsWarningBannerDismissed } from '$lib/config/config';
 	import type { PageData } from './$types';
+	import IconExternalLink from '$lib/icons/IconExternalLink.svelte';
 	import Board from './Board.svelte';
 
 	export let data: PageData;
@@ -14,17 +16,41 @@
 		githubContextStore,
 		project
 	} = data;
+
+	const httpsWarningBannerDismissed = projectHttpsWarningBannerDismissed(projectId);
 </script>
 
-<Board
-	{branchController}
-	{projectId}
-	{cloud}
-	base={$baseBranchStore}
-	branches={$branchesWithContent}
-	projectPath={$project?.path}
-	cloudEnabled={$project?.api?.sync || false}
-	githubContext={$githubContextStore}
-	branchesState={$branchesState}
-	baseBranchState={$baseBranchesState}
-/>
+<div class="flex h-full w-full flex-grow flex-col overflow-hidden">
+	{#if $baseBranchStore?.remoteUrl.startsWith('https') && !$httpsWarningBannerDismissed}
+		<div class="w-full bg-yellow-200/70 px-2 py-1 dark:bg-yellow-700/70">
+			HTTPS remote detected. In order to push & fetch, you may need to&nbsp;
+			<a class="font-bold" href="/user"> set up </a>&nbsp;an SSH key (
+			<a
+				target="_blank"
+				rel="noreferrer"
+				class="font-bold"
+				href="https://docs.gitbutler.com/features/virtual-branches/pushing-and-fetching#the-ssh-keys"
+			>
+				docs
+			</a>
+			&nbsp;
+			<IconExternalLink class="inline h-4 w-4" />
+			).
+			<button on:click={() => httpsWarningBannerDismissed.set(true)}>Dismiss</button>
+		</div>
+	{/if}
+	<div class="flex-grow overflow-x-auto overflow-y-hidden overscroll-none">
+		<Board
+			{branchController}
+			{projectId}
+			{cloud}
+			base={$baseBranchStore}
+			branches={$branchesWithContent}
+			projectPath={$project?.path}
+			cloudEnabled={$project?.api?.sync || false}
+			githubContext={$githubContextStore}
+			branchesState={$branchesState}
+			baseBranchState={$baseBranchesState}
+		/>
+	</div>
+</div>

packages/ui/src/routes/[projectId]/board/Board.svelte

@@ -51,7 +51,7 @@
 	<div
 		bind:this={dropZone}
 		id="branch-lanes"
-		class="bg-color-2 flex flex-shrink flex-grow items-start"
+		class="bg-color-2 flex h-full flex-shrink flex-grow items-start"
 		role="group"
 		use:dzHighlight={{ type: dzType, active: 'board-dz-active', hover: 'board-dz-hover' }}
 		on:dragover={(e) => {

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

@@ -522,7 +522,7 @@
 			</div>
 			<div
 				bind:this={viewport}
-				class="hide-native-scrollbar flex max-h-full flex-grow flex-col overflow-y-scroll pb-8"
+				class="hide-native-scrollbar flex max-h-full flex-grow flex-col overflow-y-scroll overscroll-none pb-8"
 			>
 				<div bind:this={contents}>
 					{#if branch.conflicted}

packages/ui/src/routes/[projectId]/settings/+page.svelte

@@ -52,18 +52,20 @@
 	};
 </script>
 
-<div class="mx-auto h-fit w-full max-w-xl py-10">
-	<div class="flex flex-col gap-y-8">
+<div class="h-full flex-grow overflow-y-auto overscroll-none">
+	<div class="mx-auto flex min-w-min max-w-xl flex-col gap-y-6 overflow-visible p-8">
 		<div class="flex w-full">
 			<BackButton />
 			<h2 class="text-2xl font-medium">Project settings</h2>
 		</div>
-		<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
+		<div class="bg-color-1 h-[0.0625rem] shrink-0" />
 		<CloudForm project={$project} on:updated={onCloudUpdated} />
+		<div class="bg-color-1 h-[0.0625rem] shrink-0" />
 		<DetailsForm project={$project} on:updated={onDetailsUpdated} />
+		<div class="bg-color-1 h-[0.0625rem] shrink-0" />
 		<KeysForm project={$project} on:updated={onKeysUpdated} />
 
-		<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
+		<div class="bg-color-1 h-[0.0625rem] shrink-0" />
 		<div class="flex gap-x-4">
 			<a
 				href="https://discord.gg/wDKZCPEjXC"
@@ -88,7 +90,7 @@
 			</a>
 		</div>
 
-		<div class="h-[0.0625rem] bg-light-400 dark:bg-dark-700" />
+		<div class="bg-color-1 h-[0.0625rem] shrink-0" />
 		<Button color="destructive" kind="outlined" on:click={() => deleteConfirmationModal.show()}>
 			Delete project
 		</Button>