fix(console): polish Go limits chart on mobile (#51870)

packages/console/app/src/component/go-plan-chart.css

@@ -262,12 +262,16 @@
   }
   /* Phones stack each model name above its bar so the table fits without horizontal scrolling. */
   @media (max-width: 40rem) {
-    table,
+    /* Rows share the table's columns through subgrid, so number columns size to their unwrapped headers. */
+    table {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      min-width: 0;
+    }
     thead,
     tbody,
     tfoot {
-      display: block;
-      min-width: 0;
+      display: contents;
     }
     colgroup,
     tfoot td:not([data-slot="axis"]) {
@@ -275,21 +279,23 @@
     }
     tr {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 5.5rem 4rem;
+      grid-column: 1 / -1;
+      grid-template-columns: subgrid;
       align-items: center;
     }
     thead tr {
       border: 1px solid var(--go-console-border);
       border-radius: 6px;
     }
-    thead th {
+    thead th,
+    thead th:is(:first-child, :last-child) {
       border: 0;
-      padding-inline: 0.5rem;
-      white-space: normal;
+      padding-inline: 0.375rem;
+      font-size: 0.75rem;
     }
-    /* The 100 and 1K ticks sit too close together to label both. */
-    [data-slot="gridline"]:first-child,
-    [data-slot="axis"] span:first-child {
+    /* The bars are too narrow to label 100 and 1K apart from 10K. */
+    [data-slot="gridline"],
+    [data-slot="axis"] span:not(:last-child) {
       display: none;
     }
     thead th:first-child {
@@ -301,17 +307,38 @@
     }
     tbody th {
       grid-column: 1 / -1;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.25rem 0.5rem;
       padding-block-end: 0;
     }
+    [data-slot="labels"] {
+      margin-top: 0;
+    }
+    /* Bars extend under the requests column's spare header width, stopping short of the right-aligned numbers. */
     [data-slot="bars"],
     [data-slot="axis"] {
-      margin-inline-start: 1rem;
+      grid-column: 1 / 3;
+      margin-inline: 1rem 4rem;
+    }
+    [data-slot="bars"] {
+      grid-row: 2;
+    }
+    [data-slot="bars"] + [data-slot="number"] {
+      grid-row: 2;
+      grid-column: 2;
+    }
+    [data-slot="number"]:last-child {
+      grid-row: 2;
+      grid-column: 3;
     }
     [data-slot="number"] {
-      padding-inline: 0.5rem;
+      padding-inline: 0.375rem;
     }
     /* Rows are grids here, so highlight the row itself instead of each cell. */
     tbody tr {
+      padding-block: 0.375rem;
       border-radius: 6px;
       transition: background-color 120ms ease;
     }

packages/console/app/src/i18n/en.ts

@@ -286,7 +286,7 @@ export const dict = {
   "go.graph.label": "Requests / 5 hours",
   "go.graph.period": "Usage",
   "go.graph.model": "Model",
-  "go.graph.requests": "Est. requests / 5 hr",
+  "go.graph.requests": "Est. requests / 5h",
   "go.graph.allowance": "Monthly usage",
   "go.graph.new": "New",
   "go.graph.scale": "Nonlinear request scale",

packages/console/app/src/routes/go/index.css

@@ -365,6 +365,12 @@ body {
       color: var(--color-text-strong);
       line-height: 1.4;
     }
+
+    @media (max-width: 40rem) {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+    }
   }
 
   [data-slot="hero-copy"] {