diff --git a/packages/console/app/src/component/go-plan-chart.css b/packages/console/app/src/component/go-plan-chart.css index 522f53ba27..b2ca0ca661 100644 --- a/packages/console/app/src/component/go-plan-chart.css +++ b/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; } diff --git a/packages/console/app/src/i18n/en.ts b/packages/console/app/src/i18n/en.ts index 5496f3846c..c3753cb7d2 100644 --- a/packages/console/app/src/i18n/en.ts +++ b/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", diff --git a/packages/console/app/src/routes/go/index.css b/packages/console/app/src/routes/go/index.css index 0253e68166..b09be1e92a 100644 --- a/packages/console/app/src/routes/go/index.css +++ b/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"] {