#12175: ui: fix sessions table collapse on narrow widths
app: web-ui
stale
size: XS
Cluster:
Web UI Enhancements and Fixes
## 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
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
75.9%
#13838: UI: fix config panel CI failures and modularize rendering
by fresed05 · 2026-02-11
75.6%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
75.5%
#6521: fix: addressed style issue for chat compose and thread on mobile
by spencer-rafada · 2026-02-01
75.2%
#5509: Fix TUI crash when terminal window is too narrow
by omar-khaled-2 · 2026-01-31
74.4%
#7316: fix: /chat dashboard performance
by felipcsousa · 2026-02-02
73.9%
#17448: ui: make tool cards collapsible with inline expansion
by karimStekelenburg · 2026-02-15
73.6%
#21940: style(layout): change content display to flex
by homfarnam · 2026-02-20
73.2%
#5097: fix(ui): prefer session label over displayName in dropdown
by d-init-d · 2026-01-31
73.1%
#9432: fix(ui): improve Firefox/Gecko compatibility for chat layout
by dbottme · 2026-02-05
72.8%