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

@@ -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;
   }