refac

src/lib/components/chat/ChatControls.svelte

@@ -141,11 +141,14 @@
 		dragged = false;
 	};
 
-	onMount(() => {
+	onMount(async () => {
 		mediaQuery = window.matchMedia('(min-width: 1024px)');
 		mediaQuery.addEventListener('change', handleMediaQuery);
 		handleMediaQuery(mediaQuery);
 
+		// Wait for Svelte to render the Pane after largeScreen changed
+		await tick();
+
 		const container = document.getElementById('chat-container');
 		minSize = Math.floor((350 / container.clientWidth) * 100);
 
@@ -172,13 +175,12 @@
 
 		// Delay enabling onCollapse so the Pane's initial collapsed state
 		// (defaultSize=0) doesn't reset showControls
-		setTimeout(() => {
-			paneReady = true;
-			// If controls were persisted as open, expand the pane now that it's ready
-			if ($showControls && pane) {
-				openPane();
-			}
-		}, 0);
+		setTimeout(() => { paneReady = true; }, 0);
+
+		// If controls were persisted as open, set the pane to the saved size
+		if ($showControls && pane) {
+			openPane();
+		}
 	});
 
 	onDestroy(() => {

src/routes/(app)/+layout.svelte

@@ -324,12 +324,11 @@
 				checkForVersionUpdates();
 			}
 		}
-		// Persist showControls via chatControlsSize (0 = closed, >0 = open at that size)
-		await showControls.set(!$mobile ? parseInt(localStorage.chatControlsSize || '0') > 0 : false);
+		// Persist showControls: track open/close state separately from saved size
+		// chatControlsSize always retains the last width for openPane()
+		await showControls.set(!$mobile ? localStorage.showControls === 'true' : false);
 		showControls.subscribe((value) => {
-			if (!value) {
-				localStorage.chatControlsSize = '0';
-			}
+			localStorage.showControls = value ? 'true' : 'false';
 		});
 
 		await tick();