Double click branch icon to maximize lane

This is an exploration of easy access to a more detailed view. Limiting
to 8 diff rows when full width.

src/routes/repo/[projectId]/Board.svelte

@@ -39,7 +39,7 @@
 
 <div
 	id="branch-lanes"
-	class="flex max-w-full flex-shrink flex-grow items-start overflow-x-auto overflow-y-hidden bg-light-200 px-2 dark:bg-dark-1000"
+	class="flex max-w-full flex-shrink flex-grow snap-x items-start overflow-x-auto overflow-y-hidden bg-light-200 px-2 dark:bg-dark-1000"
 	use:dndzone={{
 		items: branches,
 		types: ['branch'],

src/routes/repo/[projectId]/BranchLane.svelte

@@ -34,6 +34,7 @@
 	$: localCommits = commits.filter((c) => !c.isRemote);
 
 	let allExpanded: boolean | undefined;
+	let maximized = false;
 	let descriptionHeight = 0;
 	let textArea: HTMLTextAreaElement;
 	let isPushing = false;
@@ -144,12 +145,17 @@
 </script>
 
 <div
-	class="flex max-h-full w-[22.5rem] shrink-0 flex-col overflow-y-auto py-2 px-3 dark:text-dark-100"
+	class="flex max-h-full min-w-[24rem] max-w-[120ch] shrink-0 snap-center flex-col overflow-y-auto py-2 px-3 transition-width dark:text-dark-100"
+	class:w-full={maximized}
+	class:w-96={!maximized}
 >
 	<div
 		class="mb-2 flex w-full shrink-0 items-center gap-x-2 rounded-lg bg-light-200 text-lg font-bold text-light-900 dark:bg-dark-1000 dark:font-normal dark:text-dark-100"
 	>
-		<div class="flex-grow-0 text-light-600 dark:text-dark-200">
+		<div
+			on:dblclick={() => (maximized = !maximized)}
+			class="flex-grow-0 cursor-pointer text-light-600 dark:text-dark-200"
+		>
 			<IconBranch />
 		</div>
 		<div class="flex-grow">
@@ -229,6 +235,7 @@
 					filepath={file.path}
 					expanded={file.expanded}
 					hunks={file.hunks}
+					{maximized}
 					on:update={(e) => {
 						handleFileUpdate(file.id, e.detail);
 					}}

src/routes/repo/[projectId]/FileCard.svelte

@@ -14,6 +14,7 @@
 	export let projectPath: string;
 	export let filepath: string;
 	export let hunks: Hunk[];
+	export let maximized: boolean;
 
 	const dispatch = createEventDispatcher<{
 		expanded: boolean;
@@ -89,7 +90,7 @@
 		{#if expanded}
 			{#each hunks || [] as hunk (hunk.id)}
 				<div
-					class="changed-hunk flex w-full flex-col gap-1 rounded-lg border border-light-200 bg-white dark:border-dark-400 dark:bg-dark-900"
+					class="changed-hunk flex w-full flex-col rounded-lg border border-light-200 bg-white dark:border-dark-400 dark:bg-dark-900"
 					on:contextmenu|preventDefault={(e) => popupMenu.openByMouse(e, hunk)}
 				>
 					<div class="truncate whitespace-normal p-2">
@@ -99,9 +100,9 @@
 					</div>
 					<div class="cursor-pointer overflow-clip text-sm">
 						<!-- Disabling syntax highlighting for performance reasons -->
-						<HunkDiffViewer diff={hunk.diff} filePath="foo" linesShown={2} />
+						<HunkDiffViewer diff={hunk.diff} filePath="foo" linesShown={maximized ? 8 : 2} />
 					</div>
-					<div class="flex p-2 text-sm">
+					<div class="flex px-2 py-1 text-sm">
 						<div class="flex flex-grow gap-1">
 							<div class="text-green-600">+{hunkSize(hunk.diff)[0]}</div>
 							{#if hunkSize(hunk.diff)[1] > 0}

src/routes/repo/[projectId]/HunkDiffViewer.svelte

@@ -115,7 +115,7 @@
 			{curNumber}
 		</span>
 		<span
-			class="pl-1 diff-line-{row.type} overflow-hidden text-ellipsis whitespace-nowrap"
+			class="pl-1 diff-line-{row.type} overflow-hidden whitespace-nowrap"
 			class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
 		>
 			{#each row.render.html as content}

tailwind.config.cjs

@@ -6,6 +6,11 @@ const config = {
 		backgroundOpacity: false
 	},
 	theme: {
+		extend: {
+			transitionProperty: {
+				width: 'width'
+			}
+		},
 		fontFamily: {
 			sans: ['Inter', 'SF Pro', '-apple-system', 'system-ui'],
 			mono: ['SF Mono', 'Consolas', 'Liberation Mono', 'monospace']