fix: smaller screens sidebar toggle

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>
   )

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">