From f416138844231193987f8b2a30e78331b87dc662 Mon Sep 17 00:00:00 2001 From: vprdev Date: Mon, 28 Sep 2026 06:05:12 -0700 Subject: [PATCH] fix(console): fit Go page to mobile screens (#51855) --- .../app/src/component/go-plan-chart.css | 51 +++++++++++++++++++ packages/console/app/src/routes/go/index.css | 1 + 2 files changed, 52 insertions(+) diff --git a/packages/console/app/src/component/go-plan-chart.css b/packages/console/app/src/component/go-plan-chart.css index 5cdea42213..699656ff13 100644 --- a/packages/console/app/src/component/go-plan-chart.css +++ b/packages/console/app/src/component/go-plan-chart.css @@ -262,6 +262,57 @@ flex-direction: column; } } + /* Phones stack each model name above its bar so the table fits without horizontal scrolling. */ + @media (max-width: 40rem) { + table, + thead, + tbody, + tfoot { + display: block; + min-width: 0; + } + colgroup, + tfoot td:not([data-slot="axis"]) { + display: none; + } + tr { + display: grid; + grid-template-columns: minmax(0, 1fr) 5.5rem 4rem; + align-items: center; + } + thead tr { + border: 1px solid var(--go-console-border); + border-radius: 6px; + } + thead th { + border: 0; + padding-inline: 0.5rem; + white-space: normal; + } + /* The 100 and 1K ticks sit too close together to label both. */ + [data-slot="gridline"]:first-child, + [data-slot="axis"] span:first-child { + display: none; + } + thead th:first-child { + padding-inline-start: 1rem; + } + thead th:last-child, + [data-slot="number"]:last-child { + padding-inline-end: 1rem; + } + tbody th { + grid-column: 1 / -1; + padding-block-end: 0; + } + [data-slot="bars"], + [data-slot="axis"] { + margin-inline-start: 1rem; + } + [data-slot="number"] { + padding-inline: 0.5rem; + } + } @media (prefers-reduced-motion: reduce) { [data-slot="tier-switch"] button, [data-slot="gridline"], diff --git a/packages/console/app/src/routes/go/index.css b/packages/console/app/src/routes/go/index.css index 0cae41fa9e..0253e68166 100644 --- a/packages/console/app/src/routes/go/index.css +++ b/packages/console/app/src/routes/go/index.css @@ -153,6 +153,7 @@ body { } [data-component="container"] { + width: 100%; max-width: 67.5rem; margin: 0 auto; border: 1px solid var(--color-border-weak);