mobile changes

src/app.tsx

@@ -41,6 +41,7 @@ function AppLayout(props: { children: any }) {
         setRightBarVisible(true);
       }
 
+      // On mobile, leftBarSize() is always 0 (overlay mode)
       const newWidth = window.innerWidth - leftBarSize() - rightBarSize();
       setCenterWidth(newWidth);
     };
@@ -55,6 +56,7 @@ function AppLayout(props: { children: any }) {
 
   // Recalculate when bar sizes change (visibility or actual resize)
   createEffect(() => {
+    // On mobile, leftBarSize() is always 0 (overlay mode)
     const newWidth = window.innerWidth - leftBarSize() - rightBarSize();
     setCenterWidth(newWidth);
   });

src/components/Bars.tsx

@@ -4,7 +4,6 @@ import {
   onMount,
   createEffect,
   createSignal,
-  createMemo,
   Show,
   For,
   onCleanup

src/context/bars.tsx

@@ -1,4 +1,11 @@
-import { Accessor, createContext, useContext, createMemo } from "solid-js";
+import {
+  Accessor,
+  createContext,
+  useContext,
+  createMemo,
+  onMount,
+  onCleanup
+} from "solid-js";
 import { createSignal } from "solid-js";
 import { hapticFeedback } from "~/lib/client-utils";
 
@@ -41,10 +48,26 @@ export function BarsProvider(props: { children: any }) {
   const [leftBarVisible, _setLeftBarVisible] = createSignal(true);
   const [rightBarVisible, _setRightBarVisible] = createSignal(true);
   const [barsInitialized, setBarsInitialized] = createSignal(false);
+  const [windowWidth, setWindowWidth] = createSignal(
+    typeof window !== "undefined" ? window.innerWidth : 1024
+  );
 
   let leftBarSized = false;
   let rightBarSized = false;
 
+  // Track window width reactively for mobile/desktop detection
+  onMount(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    onCleanup(() => {
+      window.removeEventListener("resize", handleResize);
+    });
+  });
+
   const wrappedSetLeftBarSize = (size: number) => {
     if (!barsInitialized()) {
       // Before initialization, capture natural size
@@ -88,6 +111,9 @@ export function BarsProvider(props: { children: any }) {
     // Return 0 if hidden (natural size is 0), otherwise return synced size when initialized
     const naturalSize = _leftBarNaturalSize();
     if (naturalSize === 0) return 0; // Hidden
+    // On mobile (<768px), always return 0 for layout (overlay mode)
+    const isMobile = windowWidth() < 768;
+    if (isMobile) return 0;
     return barsInitialized() ? syncedBarSize() : naturalSize;
   });
 

src/routes/blog/index.tsx

@@ -22,7 +22,7 @@ export default function BlogIndex() {
 
       <div class="mx-auto pt-8 pb-24">
         <Suspense fallback={<TerminalSplash />}>
-          <div class="flex flex-col justify-center gap-4 md:flex-row md:justify-around">
+          <div class="flex flex-row justify-around gap-4">
             <PostSortingSelect />
 
             <Show when={data() && Object.keys(data()!.tagMap).length > 0}>
@@ -33,7 +33,7 @@ export default function BlogIndex() {
               <div class="mt-2 flex justify-center md:mt-0 md:justify-end">
                 <A
                   href="/blog/create"
-                  class="border-text rounded border px-4 py-2 transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
+                  class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
                 >
                   Create Post
                 </A>

src/routes/resume.tsx

@@ -5,7 +5,6 @@ export default function Resume() {
   let iframeRef: HTMLIFrameElement | undefined;
 
   onMount(() => {
-    // Prevent iframe errors from bubbling up
     const handleError = (e: ErrorEvent) => {
       if (e.filename?.includes("resume.pdf") || e.message === "Script error.") {
         e.preventDefault();
@@ -18,7 +17,6 @@ export default function Resume() {
     onCleanup(() => {
       window.removeEventListener("error", handleError, true);
 
-      // Clear iframe source before unmount to prevent script errors
       if (iframeRef) {
         iframeRef.src = "about:blank";
       }
@@ -30,7 +28,7 @@ export default function Resume() {
       <Title>Resume | Michael Freno</Title>
       <Meta
         name="description"
-        content="View Michael Freno's resume - Software Engineer with expertise in full-stack development, game development, and open source."
+        content="View Michael Freno's resume - Software Engineer."
       />
 
       <main class="flex h-screen w-full flex-col">