fix left skeleton

src/app.tsx

@@ -5,7 +5,9 @@ import {
   ErrorBoundary,
   onMount,
   onCleanup,
-  Suspense
+  Suspense,
+  Show,
+  createSignal
 } from "solid-js";
 import "./app.css";
 import { LeftBar, RightBar } from "./components/Bars";
@@ -32,8 +34,12 @@ function AppLayout(props: { children: any }) {
   let lastScrollY = 0;
   const SCROLL_THRESHOLD = 75;
 
+  // Track if we're on the client (hydrated) - starts false on server
+  const [isClient, setIsClient] = createSignal(false);
+
   // Use onMount to avoid hydration issues - window operations are client-only
   onMount(() => {
+    setIsClient(true);
     const windowWidth = createWindowWidth();
 
     createEffect(() => {
@@ -188,30 +194,37 @@ function AppLayout(props: { children: any }) {
     <>
       <div class="flex max-w-screen flex-row">
         <LeftBar />
-        <div
-          class="bg-base relative h-screen overflow-x-hidden overflow-y-scroll"
-          style={
-            barsInitialized()
-              ? {
-                  width: `${centerWidth()}px`,
-                  "margin-left": `${leftBarSize()}px`
-                }
-              : undefined
-          }
+        <Show
+          when={!isClient() || barsInitialized()}
+          fallback={<TerminalSplash />}
         >
-          <noscript>
-            <div class="bg-yellow text-crust border-text fixed top-0 z-150 ml-16 border-b-2 p-4 text-center font-semibold md:ml-64">
-              JavaScript is disabled. Features will be limited.
-            </div>
-          </noscript>
           <div
-            class="py-16"
-            onMouseUp={handleCenterTapRelease}
-            onTouchEnd={handleCenterTapRelease}
+            class="bg-base relative h-screen overflow-x-hidden overflow-y-scroll"
+            style={
+              barsInitialized()
+                ? {
+                    width: `${centerWidth()}px`,
+                    "margin-left": `${leftBarSize()}px`
+                  }
+                : { width: "calc(100vw - 600px)", "margin-left": "300px" }
+            }
           >
-            <Suspense fallback={<TerminalSplash />}>{props.children}</Suspense>
+            <noscript>
+              <div class="bg-yellow text-crust border-text fixed top-0 z-150 ml-16 border-b-2 p-4 text-center font-semibold md:ml-64">
+                JavaScript is disabled. Features will be limited.
+              </div>
+            </noscript>
+            <div
+              class="py-16"
+              onMouseUp={handleCenterTapRelease}
+              onTouchEnd={handleCenterTapRelease}
+            >
+              <Suspense fallback={<TerminalSplash />}>
+                {props.children}
+              </Suspense>
+            </div>
           </div>
-        </div>
+        </Show>
         <RightBar />
       </div>
     </>