center session header metrics

packages/ui/src/components/message-list-header.tsx

@@ -21,7 +21,7 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
 
   return (
     <div class="connection-status">
-      <div class="connection-status-text connection-status-info flex flex-wrap items-center gap-3 text-sm font-medium">
+      <div class="connection-status-menu">
         <Show when={props.showSidebarToggle}>
           <button
             type="button"
@@ -32,7 +32,10 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
             <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
           </button>
         </Show>
-        <div class="flex flex-wrap items-center gap-2 text-xs text-primary/90">
+      </div>
+
+      <div class="connection-status-text connection-status-info">
+        <div class="connection-status-usage">
           <div class={METRIC_CHIP_CLASS}>
             <span class={METRIC_LABEL_CLASS}>Used</span>
             <span class="font-semibold text-primary">{props.formatTokens(props.usedTokens)}</span>

packages/ui/src/styles/messaging/message-section.css

@@ -5,10 +5,16 @@
 .connection-status {
   @apply grid items-center px-4 py-2 gap-4;
   grid-template-columns: 1fr auto 1fr;
+  grid-template-areas: "info shortcut meta";
   background-color: var(--surface-secondary);
   border-bottom: 1px solid var(--border-base);
 }
 
+.connection-status-menu {
+  display: none;
+  grid-area: menu;
+}
+
 .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);
@@ -52,15 +58,26 @@
 }
 
 .connection-status-info {
-  justify-self: start;
+  @apply flex flex-wrap items-center gap-3 text-sm font-medium;
+  grid-area: info;
+  justify-self: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.connection-status-usage {
+  @apply flex flex-wrap items-center justify-center gap-2 text-xs;
+  color: var(--text-primary);
 }
 
 .connection-status-shortcut {
+  grid-area: shortcut;
   justify-self: center;
   text-align: center;
 }
 
 .connection-status-meta {
+  grid-area: meta;
   justify-self: end;
 }
 
@@ -105,6 +122,36 @@
   }
 }
 
+@media (max-width: 640px) {
+  .connection-status {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      "menu shortcut meta"
+      "info info info";
+    row-gap: 0.5rem;
+  }
+
+  .connection-status-menu {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .connection-status-info {
+    justify-self: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .connection-status-shortcut {
+    justify-self: center;
+  }
+
+  .connection-status-meta {
+    justify-self: end;
+  }
+}
+
 .message-scroll-button-wrapper {
   position: absolute;
   right: 1rem;