From 4e778145f046bc244a14414518b0123864f72763 Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Wed, 8 Oct 2025 20:17:07 +0100
Subject: [PATCH 1/3] nav adjustments wip

---
 src/lib/components/ExpandNavigation.svelte |  2 +-
 src/routes/+layout.svelte                  | 23 +++++++++++-----------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/ExpandNavigation.svelte b/src/lib/components/ExpandNavigation.svelte
index 45aa691f1e0..ad2e2e8133a 100644
--- a/src/lib/components/ExpandNavigation.svelte
+++ b/src/lib/components/ExpandNavigation.svelte
@@ -10,7 +10,7 @@
 
 <button
 	onclick={onClick}
-	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 dark:*:hover:bg-gray-600 max-md:hidden {!isCollapsed
+	class="{classNames} group flex h-16 w-6 flex-col items-end justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 dark:*:hover:bg-gray-600 max-md:hidden {!isCollapsed
 		? '*:bg-gray-200/70 dark:*:bg-gray-800'
 		: '*:bg-gray-200 dark:*:bg-gray-700'}"
 	name="sidebar-toggle"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e1d5950b864..d1c3e3bf6e9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -241,18 +241,12 @@
 <BackgroundGenerationPoller />
 
 <div
-	class="fixed grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
-		? 'md:grid-cols-[290px,1fr]'
-		: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
+	class={[
+		"fixed grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-sm",
+		isNavCollapsed ? "md:grid-cols-[0px,1fr]" : "md:grid-cols-[290px,1fr]",
+		"transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]",
+	]}
 >
-	<ExpandNavigation
-		isCollapsed={isNavCollapsed}
-		onClick={() => (isNavCollapsed = !isNavCollapsed)}
-		classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
-			? 'left-[290px]'
-			: 'left-0'} *:transition-transform"
-	/>
-
 	{#if canShare}
 		<button
 			type="button"
@@ -274,7 +268,7 @@
 		/>
 	</MobileNav>
 	<nav
-		class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[290px] max-md:hidden"
+		class="relative grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-y-clip *:w-[290px] max-md:hidden"
 	>
 		<NavMenu
 			{conversations}
@@ -283,6 +277,11 @@
 			ondeleteConversation={(id) => deleteConversation(id)}
 			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
 		/>
+		<ExpandNavigation
+			isCollapsed={isNavCollapsed}
+			onClick={() => (isNavCollapsed = !isNavCollapsed)}
+			classNames="absolute inset-y-0 -right-2 z-10 my-auto *:transition-transform"
+		/>
 	</nav>
 	{#if currentError}
 		<Toast message={currentError} />

From d83445b37db8d2a3e2f563a596439594d4fb73a9 Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Wed, 8 Oct 2025 20:20:06 +0100
Subject: [PATCH 2/3] fix toggle button animation

---
 src/routes/+layout.svelte | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d1c3e3bf6e9..1df07fcd242 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -267,22 +267,22 @@
 			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
 		/>
 	</MobileNav>
-	<nav
-		class="relative grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-y-clip *:w-[290px] max-md:hidden"
-	>
-		<NavMenu
-			{conversations}
-			user={data.user}
-			canLogin={!data.user && data.loginEnabled}
-			ondeleteConversation={(id) => deleteConversation(id)}
-			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
-		/>
+	<div class="relative h-full max-md:hidden">
+		<nav class="grid h-full grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[290px]">
+			<NavMenu
+				{conversations}
+				user={data.user}
+				canLogin={!data.user && data.loginEnabled}
+				ondeleteConversation={(id) => deleteConversation(id)}
+				oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
+			/>
+		</nav>
 		<ExpandNavigation
 			isCollapsed={isNavCollapsed}
 			onClick={() => (isNavCollapsed = !isNavCollapsed)}
 			classNames="absolute inset-y-0 -right-2 z-10 my-auto *:transition-transform"
 		/>
-	</nav>
+	</div>
 	{#if currentError}
 		<Toast message={currentError} />
 	{/if}

From ed0d9eeda598e850ab0e9811c627ebceacc8b88d Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Mon, 13 Oct 2025 18:48:26 +0100
Subject: [PATCH 3/3] fix overflow

---
 src/routes/+layout.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1df07fcd242..9d33577b949 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -267,8 +267,10 @@
 			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
 		/>
 	</MobileNav>
-	<div class="relative h-full max-md:hidden">
-		<nav class="grid h-full grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[290px]">
+	<div class="relative max-h-screen max-md:hidden">
+		<nav
+			class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[290px]"
+		>
 			<NavMenu
 				{conversations}
 				user={data.user}