← Back to PRs

#12175: ui: fix sessions table collapse on narrow widths

by benjipeng open 2026-02-08 23:31 View on GitHub →
app: web-ui stale size: XS
## Summary - Fix responsive behavior for the Sessions table so rows actually collapse on narrow layouts. - Add container query support so collapse also works when the card is narrow even if viewport width is still wide. ## Root Cause - The 1-column responsive rule for `.table-head`/`.table-row` was in `layout.css`, but the base 9-column rule was defined later in `components.css`. - Same specificity + later import meant the 9-column rule won, so collapse never applied. ## Changes - File: `ui/src/styles/components.css` - Add `container-type: inline-size` to `.table` - Add responsive overrides after the base table rule: - `@media (max-width: 1100px) { .table-head, .table-row { grid-template-columns: 1fr; } }` - `@container (max-width: 1100px) { .table-head, .table-row { grid-template-columns: 1fr; } }` ## Validation - `pnpm --dir ui build` (pass) ## Scope - CSS-only change, single file. <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adjusts the shared `.table` styling in `ui/src/styles/components.css` to make the Sessions table (and any other `.table` instances) collapse to a single-column grid under narrow widths. It does this by: - Marking `.table` as a container (`container-type: inline-size`) so container queries can react to the card width. - Adding a viewport-based media query and a container query (both at `1100px`) that override the base 9-column `grid-template-columns` on `.table-head`/`.table-row` to `1fr`. This fits with existing patterns in the file (e.g., `.list` and `.log-stream` already opt into `container-type: inline-size` and use `@container` breakpoints). <h3>Confidence Score: 5/5</h3> - This PR is safe to merge with minimal risk. - Change is localized to CSS in a single file, matches existing container-query patterns in the codebase, and the override ordering/specificity issue described in the PR is directly addressed by moving the responsive rule after the base grid definition. - No files require special attention <!-- greptile_other_comments_section --> <sub>(2/5) Greptile learns from your feedback when you react with thumbs up/down!</sub> **Context used:** - Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=fd949e91-5c3a-4ab5-90a1-cbe184fd6ce8)) - Context from `dashboard` - AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=0d0c8278-ef8e-4d6c-ab21-f5527e322f13)) <!-- /greptile_comment -->

Most Similar PRs