center session header metrics

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;