From 10dff8f45ede78fa68e41397851177230e035e49 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Wed, 21 Jan 2026 02:35:18 +0100
Subject: [PATCH] fix(frontend): better layout

---
 frontend/src/routes/[mnemonic]/+page.svelte | 51 +++++++++------------
 frontend/src/routes/layout.css              |  7 +--
 2 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/frontend/src/routes/[mnemonic]/+page.svelte b/frontend/src/routes/[mnemonic]/+page.svelte
index d97f4ec..45db2c0 100644
--- a/frontend/src/routes/[mnemonic]/+page.svelte
+++ b/frontend/src/routes/[mnemonic]/+page.svelte
@@ -39,11 +39,9 @@
 			: []
 	);
 
-	let messagesContainer = $state<HTMLDivElement | null>(null);
-
 	$effect(() => {
-		if (messages.length && messagesContainer) {
-			messagesContainer.scrollTop = messagesContainer.scrollHeight;
+		if (messages.length) {
+			window.scrollTo(0, document.body.scrollHeight);
 		}
 	});
 
@@ -101,21 +99,18 @@
 	/>
 </svelte:head>
 
-<div class="fixed inset-0 flex flex-col bg-black text-white">
+<div class="min-h-dvh bg-black p-1.5 text-white">
 	{#if chatData.isLoading}
-		<div class="flex flex-1 items-center justify-center text-xs text-neutral-500">Loading...</div>
+		<div class="py-4 text-center text-xs text-neutral-500">Loading...</div>
 	{:else if chatData.error}
-		<div class="flex flex-1 flex-col items-center justify-center gap-1 p-2 text-red-500">
+		<div class="py-4 text-center text-red-500">
 			<div class="text-xs">Error</div>
-			<div class="max-w-full text-center text-[8px] break-all">{chatData.error.message}</div>
+			<div class="text-[8px] break-all">{chatData.error.message}</div>
 		</div>
 	{:else if !chatData.data}
-		<div class="flex flex-1 items-center justify-center text-xs text-neutral-500">Not found</div>
+		<div class="py-4 text-center text-xs text-neutral-500">Not found</div>
 	{:else}
-		<div
-			bind:this={messagesContainer}
-			class="flex-1 space-y-1 overflow-y-auto overscroll-contain p-1.5"
-		>
+		<div class="space-y-1">
 			{#each messages as message (message._id)}
 				<ChatMessage
 					role={message.role}
@@ -125,23 +120,21 @@
 			{/each}
 		</div>
 
-		<div class="shrink-0 border-t border-neutral-800">
-			{#if followUpOptions.length > 0}
-				<div class="px-1.5 py-1">
-					<FollowUpButtons options={followUpOptions} onselect={sendMessage} />
-				</div>
-			{/if}
+		{#if followUpOptions.length > 0}
+			<div class="mt-2">
+				<FollowUpButtons options={followUpOptions} onselect={sendMessage} />
+			</div>
+		{/if}
 
-			<div class="flex gap-1 px-1.5 pb-1">
-				<button
-					onclick={summarize}
-					class="shrink-0 rounded bg-neutral-800 px-1.5 py-0.5 text-[8px] text-neutral-400"
-				>
-					/sum
-				</button>
-				<div class="flex-1">
-					<ChatInput onsubmit={sendMessage} />
-				</div>
+		<div class="mt-2 flex gap-1">
+			<button
+				onclick={summarize}
+				class="shrink-0 rounded bg-neutral-800 px-1.5 py-0.5 text-[8px] text-neutral-400"
+			>
+				/sum
+			</button>
+			<div class="flex-1">
+				<ChatInput onsubmit={sendMessage} />
 			</div>
 		</div>
 	{/if}
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index 9d12813..0440f47 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -3,14 +3,9 @@
 html,
 body {
 	background: black;
-	overflow: hidden;
+	min-height: 100%;
 	overscroll-behavior: none;
 	-webkit-overflow-scrolling: touch;
-	touch-action: pan-y;
-	position: fixed;
-	inset: 0;
-	width: 100%;
-	height: 100%;
 }
 
 * {