sync hidden sidebar layout with mobile

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>

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

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

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}
              />