fix(extension): prevent footer label overlap

[iscekic]

What

Prevent the extension sidepanel footer's long model label from painting over the Thinking effort control at narrow widths.

Why

Blink kept the flex trigger button at fit-content width while its block wrapper shrank. The long label then overflowed right into the effort select at 320px.

How

• Make the ModelPicker wrapper a flex container so the trigger's existing flex-1 min-w-0 fills and shrinks with it.
• Add a Playwright regression spec that pins no-overlap, truncation, readable effort text, usable context control, and the intentional wide single-row layout at 320/400/560px.

Verification

• pnpm format
• pnpm --filter kilo-extension verify — 49 files, 456 tests passed
• pnpm --filter kilo-extension build
• pnpm --filter kilo-extension build:firefox
• pnpm --filter kilo-extension e2e:chrome -- tests/e2e/footer-layout.test.ts — passed in independent verifier
• pnpm --filter kilo-extension e2e:chrome — 96 passed, 11 expected live-backend skips
• Firefox E2E intentionally skipped locally: this is a shared Tailwind layout class with no Firefox-only path; Chromium geometry covers the changed behavior and CI runs Firefox.

Visual Changes

Before — 320px

Before — 360px

After — 320px

After — 560px

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

Reviewed the one-class Tailwind layout fix in the sidepanel ModelPicker wrapper and the new Playwright footer-layout regression spec; both are consistent with existing extension patterns and I found no correctness, security, or reliability defects in the changed lines (high confidence).

Notes

• relative flex min-w-0 flex-1 correctly turns the trigger's existing flex-1 min-w-0 into an effective shrink constraint; the fixed inset-0 overlay child stays out-of-flow, so the new flex context does not alter the model-picker dialog layout.
• ModelPicker has a single call site (agent-footer-controls.tsx:226) and no test asserts the old class string, so the change has no other blast radius.
• The new spec's assumptions check out: ModeControl exposes ... mode: ..., the donut summary exposes Context usage: ..., and Instant is indeed the longest label emitted by thinkingEffortLabel.
• No new listeners, timers, or retained references are introduced, so no memory-leak risk from this diff.

Files Reviewed (2 files)

• apps/extension/entrypoints/sidepanel/model-picker.tsx
• apps/extension/tests/e2e/footer-layout.test.ts

---

_{Reviewed by claude-opus-5 · Input: 58 · Output: 15.1K · Cached: 1.6M}

_{Review guidance: REVIEW.md from base branch main}