From f3c62e0723b47a1a84b9d686b2db3efcda66a306 Mon Sep 17 00:00:00 2001
From: Aaron Iker <aaron@ease.dev>
Date: Thu, 8 Jan 2026 03:39:20 +0100
Subject: [PATCH] fix: smaller screens sidebar toggle

---
 packages/app/src/components/toolbar/index.tsx   | 15 +++++++++++++--
 packages/app/src/components/toolbar/session.tsx |  7 -------
 packages/app/src/pages/layout.tsx               | 11 +----------
 3 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/app/src/components/toolbar/index.tsx b/packages/app/src/components/toolbar/index.tsx
index 4e0f273c7..f26446861 100644
--- a/packages/app/src/components/toolbar/index.tsx
+++ b/packages/app/src/components/toolbar/index.tsx
@@ -26,7 +26,7 @@ export const Toolbar: Component<ComponentProps<"div">> = ({ class: className, ..
       {...props}
     >
       <TooltipKeybind
-        class="shrink-0 relative z-10"
+        class="shrink-0 relative z-10 xl:block hidden"
         placement="bottom"
         title="Toggle sidebar"
         keybind={command.keybind("sidebar.toggle")}
@@ -56,7 +56,18 @@ export const Toolbar: Component<ComponentProps<"div">> = ({ class: className, ..
           </div>
         </Button>
       </TooltipKeybind>
-      {/* Portal mount target - content rendered here from DirectoryLayout */}
+
+      <Button
+        variant="ghost"
+        size="normal"
+        class="group/sidebar-toggle shrink-0 text-left justify-center align-middle rounded-lg px-1.5 xl:hidden relative z-10"
+        onClick={layout.mobileSidebar.toggle}
+      >
+        <div class="relative -ml-px flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+          <Icon name="menu" size="small" />
+        </div>
+      </Button>
+
       <div id={TOOLBAR_PORTAL_ID} class="contents" />
     </div>
   )
diff --git a/packages/app/src/components/toolbar/session.tsx b/packages/app/src/components/toolbar/session.tsx
index ab3c52ca4..6134552fb 100644
--- a/packages/app/src/components/toolbar/session.tsx
+++ b/packages/app/src/components/toolbar/session.tsx
@@ -57,13 +57,6 @@ export const ToolbarSession: Component<ComponentProps<"header">> = ({ class: cla
 
   return (
     <header class={`flex absolute inset-0 ${className}`} {...props}>
-      <button
-        type="button"
-        class="xl:hidden w-12 shrink-0 flex items-center justify-center border-r border-border-weak-base hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active transition-colors"
-        onClick={layout.mobileSidebar.toggle}
-      >
-        <Icon name="menu" size="small" />
-      </button>
       <div class="flex items-center justify-between gap-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <div class="flex items-center gap-2 min-w-0">
           <div class="flex items-center gap-2 min-w-0">
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 785e190af..9b6a3720a 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -1050,21 +1050,12 @@ export default function Layout(props: ParentProps) {
             />
             <div
               classList={{
-                "@container fixed inset-y-0 left-0 z-50 w-72 bg-background-base border-r border-border-weak-base flex flex-col gap-5.5 items-start self-stretch justify-between pb-5 transition-transform duration-200 ease-out": true,
+                "@container fixed inset-y-0 left-0 top-[41px] z-50 w-72 bg-background-base border-r border-border-weak-base flex flex-col gap-5.5 items-start self-stretch justify-between py-5 transition-transform duration-200 ease-out": true,
                 "translate-x-0": layout.mobileSidebar.opened(),
                 "-translate-x-full": !layout.mobileSidebar.opened(),
               }}
               onPointerDown={(e) => e.stopPropagation()}
             >
-              <div class="border-b border-border-weak-base w-full h-12 ml-px flex items-center pl-1.75 shrink-0">
-                <A
-                  href="/"
-                  class="shrink-0 h-8 flex items-center justify-start px-2 w-full"
-                  onClick={() => layout.mobileSidebar.hide()}
-                >
-                  <Mark class="shrink-0" />
-                </A>
-              </div>
               <SidebarContent mobile />
             </div>
           </div>