From 2e5a9040344abf759310ca9fd45d47f5994859dd Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sat, 6 Dec 2025 22:30:37 +0000
Subject: [PATCH] align sidebar toggle layout on collapse

---
 .../components/instance/instance-shell.tsx    | 26 +++++++++----------
 .../ui/src/styles/panels/session-layout.css   |  7 ++---
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell.tsx b/packages/ui/src/components/instance/instance-shell.tsx
index c942864b..1e229c4e 100644
--- a/packages/ui/src/components/instance/instance-shell.tsx
+++ b/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"}
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index 8b6bf5e3..0974bcc6 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/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 {