align sidebar toggle layout on collapse

packages/ui/src/components/instance/instance-shell.tsx

@@ -194,19 +194,19 @@ const InstanceShell: Component<InstanceShellProps> = (props) => {
           </div>
 
           <div class="content-area flex-1 min-h-0 overflow-hidden flex flex-col">
-            <Show
-              when={shouldShowSidebarToggle() && (!activeSessionIdForInstance() || activeSessionIdForInstance() === "info")}
-            >
-              <button
-                type="button"
-                class="session-sidebar-menu-button session-sidebar-menu-button--floating"
-                onClick={() => setIsSidebarOpen(true)}
-                aria-controls={sidebarId}
-                aria-expanded={isSidebarOpen()}
-                aria-label="Open session list"
-              >
-                <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
-              </button>
+            <Show when={shouldShowSidebarToggle()}>
+              <div class="session-sidebar-toggle">
+                <button
+                  type="button"
+                  class="session-sidebar-menu-button"
+                  onClick={() => setIsSidebarOpen(true)}
+                  aria-controls={sidebarId}
+                  aria-expanded={isSidebarOpen()}
+                  aria-label="Open session list"
+                >
+                  <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
+                </button>
+              </div>
             </Show>
             <Show
               when={activeSessionIdForInstance() === "info"}

packages/ui/src/styles/panels/session-layout.css

@@ -50,11 +50,8 @@
   z-index: 30;
 }
 
-.session-sidebar-menu-button--floating {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 20;
+.session-sidebar-toggle {
+  @apply border-b border-base px-4 py-3 bg-surface-secondary;
 }
 
 .session-sidebar-header {