fix(frontend): layout breaks at narrow widths: sticky Actions column overlaps cells, sidebar never collapses

What happens

The layout breaks at narrower window widths. Seen on production, 2026-11-04, Chrome on macOS. The widths below are viewport widths.

About 915px wide, /plans:

In the Planned Purchases table, the sticky Actions column is drawn over the Resource Type column. Its text is cut mid-word ("No recommen…").
The table scrolls horizontally behind the pinned column. That's acceptable, but nothing shows that more columns exist.
The left sidebar stays fully expanded and takes about 210px.

About 535px wide, /purchases:

The left sidebar never collapses into the hamburger menu. It stays at full width and the main content is pushed into the remaining space.
The main content is clipped at the right edge. The Approval queue text, the Savings History controls, the Purchase History "To" date input and the summary cards are cut off, with no horizontal scroll or reflow.

Steps

Open /plans with at least one planned step. Resize the window to about 915px viewport width.
Open /purchases. Resize to about 535px viewport width.

Expected

The sidebar collapses below a breakpoint. Cards and filters wrap. Wide tables scroll inside their container without the sticky column covering other cells.

Notes

Related, closed: #185 and #216. Other pages may show the same thing; they can be added here as comments.

More narrow-width evidence from my QA pages (production UI):

Inventory & Coverage > RI Exchange, 1440px window: in Active Convertible RIs, the sticky Actions column overlaps the Utilization column, so the header is clipped to "Utili" and the cell value is hidden behind the column edge.
Admin > Users, roles & API keys, 900px window (about 650px viewport): the sidebar does collapse to the hamburger here. The Users table, however, clips at the right edge: the MFA badge is cut, and Created, Last Login and the Edit/Delete actions are off-screen with no visible horizontal-scroll affordance (see also feat(frontend): wide data tables clip right-edge columns under sticky header + action bar with no scroll affordance #185).

Repro notes from fixing this in #1711 (Chromium, mocked production bundle):

~535px /purchases did not reproduce at a true 535px CSS viewport. The sidebar collapses behind the hamburger, Purchase History rows reflow into cards, and nothing is clipped or scrolls sideways. The QA window was most likely zoomed, so its CSS width was wider than the reported viewport. fix(frontend): mid-width layout: icon-only sidebar, one-line topbar chips, visible scroll hint #1711 does not change this part, and the issue does not need to stay open for it.
~915px reproduced: the sidebar stayed at full width (the icon-only collapse started at 900px), the topbar chip values wrapped, and the sticky Actions edge hint was hard to see. fix(frontend): mid-width layout: icon-only sidebar, one-line topbar chips, visible scroll hint #1711 fixes these three.
~650px Admin Users scrolls inside its card with the feat(frontend): wide data tables clip right-edge columns under sticky header + action bar with no scroll affordance #185 right-edge fade, as designed.

fix(frontend): keep the sidebar toggle working at mid widths

fix(frontend): truncate long topbar chip values at every width

fix(frontend): mid-width layout: icon-only sidebar, one-line topbar c…

Navigation Menu

Repository navigation

fix(frontend): layout breaks at narrow widths: sticky Actions column overlaps cells, sidebar never collapses #1682

What happens

Steps

Expected

Notes

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

fix(frontend): layout breaks at narrow widths: sticky Actions column overlaps cells, sidebar never collapses #1682

Description

What happens

Steps

Expected

Notes

Activity

cristim commented on Nov 4, 2026

cristim commented on Nov 4, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions