From 3373e23a410db43fa31cb94e6a87ba09ec70c875 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sat, 6 Dec 2025 22:34:30 +0000
Subject: [PATCH] sync hidden sidebar layout with mobile

---
 .../components/instance/instance-shell.tsx    |  1 +
 .../ui/src/components/message-list-header.tsx | 12 ++++---
 .../ui/src/components/message-section.tsx     |  2 ++
 .../src/components/session/session-view.tsx   |  2 ++
 .../src/styles/messaging/message-section.css  | 34 +++++++++++++++++++
 5 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell.tsx b/packages/ui/src/components/instance/instance-shell.tsx
index c942864b..81e8d7f3 100644
--- a/packages/ui/src/components/instance/instance-shell.tsx
+++ b/packages/ui/src/components/instance/instance-shell.tsx
@@ -232,6 +232,7 @@ const InstanceShell: Component<InstanceShellProps> = (props) => {
                       escapeInDebounce={props.escapeInDebounce}
                       showSidebarToggle={shouldShowSidebarToggle()}
                       onSidebarToggle={() => setIsSidebarOpen(true)}
+                      forceCompactStatusLayout={shouldShowSidebarToggle()}
                     />
                   )}
                 </Show>
diff --git a/packages/ui/src/components/message-list-header.tsx b/packages/ui/src/components/message-list-header.tsx
index 5369a320..4c48ba33 100644
--- a/packages/ui/src/components/message-list-header.tsx
+++ b/packages/ui/src/components/message-list-header.tsx
@@ -13,16 +13,18 @@ interface MessageListHeaderProps {
   formatTokens: (value: number) => string
   showSidebarToggle?: boolean
   onSidebarToggle?: () => void
+  forceCompactStatusLayout?: boolean
 }
 
 export default function MessageListHeader(props: MessageListHeaderProps) {
+
   const hasAvailableTokens = () => typeof props.availableTokens === "number"
   const availableDisplay = () => (hasAvailableTokens() ? props.formatTokens(props.availableTokens as number) : "--")
 
   return (
-    <div class="connection-status">
-      <div class="connection-status-menu">
-        <Show when={props.showSidebarToggle}>
+    <div class={props.forceCompactStatusLayout ? "connection-status connection-status--compact" : "connection-status"}>
+      <Show when={props.showSidebarToggle}>
+        <div class="connection-status-menu">
           <button
             type="button"
             class="session-sidebar-menu-button"
@@ -31,8 +33,8 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
           >
             <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
           </button>
-        </Show>
-      </div>
+        </div>
+      </Show>
 
       <div class="connection-status-text connection-status-info">
         <div class="connection-status-usage">
diff --git a/packages/ui/src/components/message-section.tsx b/packages/ui/src/components/message-section.tsx
index cdc80c4d..2c4dc5e0 100644
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -30,6 +30,7 @@ export interface MessageSectionProps {
   registerScrollToBottom?: (fn: () => void) => void
   showSidebarToggle?: boolean
   onSidebarToggle?: () => void
+  forceCompactStatusLayout?: boolean
 }
 
 export default function MessageSection(props: MessageSectionProps) {
@@ -358,6 +359,7 @@ export default function MessageSection(props: MessageSectionProps) {
         formatTokens={formatTokens}
         showSidebarToggle={props.showSidebarToggle}
         onSidebarToggle={props.onSidebarToggle}
+        forceCompactStatusLayout={props.forceCompactStatusLayout}
       />
 
       <div class="message-stream" ref={setContainerRef} onScroll={handleScroll}>
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index 263b1ef1..408e5c3e 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -24,6 +24,7 @@ interface SessionViewProps {
   escapeInDebounce: boolean
   showSidebarToggle?: boolean
   onSidebarToggle?: () => void
+  forceCompactStatusLayout?: boolean
 }
 
 export const SessionView: Component<SessionViewProps> = (props) => {
@@ -157,6 +158,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                }}
                showSidebarToggle={props.showSidebarToggle}
                onSidebarToggle={props.onSidebarToggle}
+               forceCompactStatusLayout={props.forceCompactStatusLayout}
              />
 
 
diff --git a/packages/ui/src/styles/messaging/message-section.css b/packages/ui/src/styles/messaging/message-section.css
index 68f8b3fc..1729adcf 100644
--- a/packages/ui/src/styles/messaging/message-section.css
+++ b/packages/ui/src/styles/messaging/message-section.css
@@ -15,6 +15,40 @@
   grid-area: menu;
 }
 
+.connection-status--compact {
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    "menu shortcut meta"
+    "info info info";
+  row-gap: 0.5rem;
+}
+
+.connection-status--compact .connection-status-menu {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.connection-status--compact .connection-status-info {
+  justify-self: stretch;
+  width: 100%;
+  justify-content: center;
+  text-align: center;
+}
+
+.connection-status--compact .connection-status-usage {
+  justify-content: center;
+  width: 100%;
+}
+
+.connection-status--compact .connection-status-shortcut {
+  justify-self: center;
+}
+
+.connection-status--compact .connection-status-meta {
+  justify-self: end;
+}
+
 .session-sidebar-menu-button {
   @apply inline-flex items-center justify-center border rounded-md px-2 py-1 text-sm font-medium;
   border-color: var(--border-base);