From f0436492b44efc1dac20ed980415eb24534c03dc Mon Sep 17 00:00:00 2001 From: RyderAsking Date: Mon, 3 Aug 2026 08:45:50 +0000 Subject: [PATCH 1/2] fix(ui): prevent status row controls from overlapping on narrow mobile On narrow mobile widths the chat status row rendered the edited-files summary, diff totals, todo trigger, and chevron in a single flex line. The left side has several fixed-width parts (file count, +/- counts, chevron) so it could not shrink past the right side and the right-side controls visually overlapped the truncated 'changed in workspace' label. Fold the existing 24rem hide rule for status-row__changed-label into the same 30rem container query that already hides status-row__active-todo, and lower the breakpoint from 38rem to 30rem so the secondary label remains visible on a wider range of mobile widths while the two non-collapsible sides stop competing for space. Validation: - bun run type-check (all workspaces, exit 0) - bun run lint (all workspaces, exit 0) - mobile HMR route (HTTP 200) - visual: before/after screenshots at ~360-400px width --- packages/ui/src/index.css | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index 05a8f63f..07ec8d7e 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -930,21 +930,12 @@ html:not(.dark) .chat-scroll { } } -/* Status row: collapse optional text when narrow to keep both sides in one line. - * - * The todo text goes first, and it goes early. The changed-files summary on the - * left has a floor it cannot shrink past — the file count, the +/- counts and - * the chevron are all fixed width — so once the two sides no longer fit, they - * collide rather than politely truncating. 30rem was measured against the todo - * text alone; with a changed-files summary beside it the collision starts around - * 36rem, so this hides one step before that. */ -@container status-row (max-width: 38rem) { +/* Status row: hide secondary labels before the controls collide. */ +@container status-row (max-width: 30rem) { .status-row__active-todo { display: none; } -} -@container status-row (max-width: 24rem) { .status-row__changed-label { display: none; } From b9447f0ffb8619407cbf026010f08545e0fdc8ef Mon Sep 17 00:00:00 2001 From: RyderAsking Date: Mon, 3 Aug 2026 09:55:55 +0000 Subject: [PATCH 2/2] fix(ui): preserve narrow desktop status-row behavior Keep the active todo text hidden below 38rem, as before, while hiding only the changed-files secondary label below 30rem. This fixes the mobile collision without reintroducing the documented narrow desktop overlap. --- packages/ui/src/index.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css index 07ec8d7e..b6462769 100644 --- a/packages/ui/src/index.css +++ b/packages/ui/src/index.css @@ -930,12 +930,15 @@ html:not(.dark) .chat-scroll { } } -/* Status row: hide secondary labels before the controls collide. */ -@container status-row (max-width: 30rem) { +/* Hide the long active todo before it can collide with the changed-files summary. */ +@container status-row (max-width: 38rem) { .status-row__active-todo { display: none; } +} +/* Hide the secondary changed-files label on narrow mobile layouts. */ +@container status-row (max-width: 30rem) { .status-row__changed-label { display: none; }