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

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