The command palette footer hint bar clips its last group on narrow viewports. The four KbdGroups (Navigate, Enter Select, Backspace Back when a sub-view is open, Esc Close) sit in a flex row with no wrapping, and CommandFooter clips overflow, so on a ~390 px phone viewport the Esc Close group is cut off at the right edge. Wider sub-views (project picker) lose the hint entirely.
Repro: open the web app on a phone (or a <420 px window), press mod+k, open a sub-view with a Back hint (e.g. "New thread in..."), look at the footer.
Add min-w-0 flex-wrap to the hint row in CommandPaletteContent.tsx (gap-x-3 gap-y-1.5 keeps the row gap tight when groups drop to a second line). Same approach as https://git.cafe/pingdotgg/t3code/pulls/28627. This is the shared footer, so every palette view (root actions, project picker, file search) gets the fix. Desktop is unaffected: groups only wrap when the row is too narrow.
Fixes https://git.cafe/pingdotgg/t3code/issues/29295.
Small, focused fix of an obvious visual bug, filed and diagnosed in https://git.cafe/pingdotgg/t3code/issues/29295 before this PR. One problem, one file, one className change.
vp run --filter t3 build - passedvp run check:changed - passed (format, lint, knip, affected typechecks/tests)Navigate / Enter Select / Backspace Back with the Esc group clipped at the edge; after, the groups wrap to two lines and nothing is clipped. Desktop at 1280 px checked on the fixed build: all four groups stay on one line, nothing wrapped.390 px, project picker - before: Esc Close clipped at the right edge:
after: wraps to a second line, nothing clipped:
Not verified: no real-device (Android WebView / iOS) run - emulation only; the other palette views (root actions, file search) share the footer component but were only spot-checked via the project picker; desktop behavior at widths between 430-1024 px not swept.
Written with glm-5.3-flash in Hermes Agent (diagnosed + verified live on the rig; headless CDP captures).
Fixes pingdotgg/t3code#29295
Added 1 commit
Verdict: Approved at f73ff8b
Macroscope's review found this PR approvable — Command-palette footer hints can wrap onto additional rows on narrow viewports instead of clipping. The change is confined to layout and leaves keyboard actions and product defaults unchanged.
Notes:
You can add or adjust custom eligibility rules. Learn more.
No actionable comments were generated in the recent review.
The command palette footer hint container now permits wrapping, can shrink below its content’s minimum width, and uses separate horizontal and vertical gaps.
Changes: Command palette footer
| Layer / File(s) | Summary |
|---|---|
Footer hint layout apps/web/src/components/CommandPaletteContent.tsx | The footer hint container now uses min-w-0 and flex-wrap. It uses separate horizontal and vertical gaps instead of a uniform gap. |
Estimated code review effort: 1 (Trivial) | ~3 minutes
Change: Bug fix
Suggested labels: bugfix
Suggested reviewers: juliusmarminge
00fbcMerge Risk: ⚪ Minimal · up to 00fbc
The footer can wrap on narrow viewports without a verified impact on command-palette content or controls.
| Check name | Status | Explanation |
|---|---|---|
| Title check | Passed | The title is concise, specific, and accurately describes the main change: command palette footer hints now wrap on narrow viewports instead of clipping. |
| Linked Issues check | Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | Passed | Check skipped because no linked issues were found for this pull request. |
| Description check | Passed | The pull request description includes all required sections. It clearly states the problem, reproduction steps, implementation, scope rationale, linked issue, verification commands, observed UI result… |
Explanation
The pull request description includes all required sections. It clearly states the problem, reproduction steps, implementation, scope rationale, linked issue, verification commands, observed UI results, screenshots, limitations, and agent details.
7023ed5d-caf8-4b2d-a92e-d06bfc42d00fReviewing files that changed from the base of the PR and between 47f2c8d29e981c7723467efe137ee19e91df924e and f73ff8b1bb96bcee00d8d39a4fb252e4b787f167.
apps/web/src/components/CommandPaletteContent.tsxIncluded review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.
Added 1 commit
Note
Written by gpt-6.1-sol on behalf of Maria
Verified head 00fbc3e2bce9d26e0ef39e9e84a28d2619ede790 as-is on a disposable Linux VM, with Playwright from the repository and /usr/bin/google-chrome against vp run dev.
github/main (d756fed7aa), in a separate worktree: at 390x844, Command palette → New thread in... clips Esc Close. Its right edge was x=439 inside a footer ending at x=373.Esc Close onto the second row. Checked 320, 375, 390, 430, 640, 768, 1024 and 1280 px widths; all hint groups fit. At 1280 px all four groups remain on one row. Also inspected the 390 px dark appearance.gpt-6.1-sol turns on both main and this head. No mocks, demo data or database fixtures.CommandPaletteContent.tsx.blacksmith-check: vp test run apps/web/src/components/CommandPaletteContent.browser.test.tsx apps/web/src/components/CommandPalette.browser.test.tsx (2 files, 3 tests). Existing head CI reports 31 successful checks. No code changes were needed.Before, main at 390 px:
main project picker clips the close hint at 390 px
After, PR at 390 px:
pr project picker wraps the close hint at 390 px
Desktop at 1280 px:
pr project picker keeps all hints on one row at 1280 px
Dark appearance:
pr project picker wraps hints in dark appearance
Recorded interaction: open the picker, return with Backspace, select a project with Enter, send a real Codex turn and receive its reply. The animation below is exported from the inspected recording; MP4 playback and seeking were also checked in T3's browser.
palette keyboard flow creates a thread and receives a real codex reply
Native iOS/Android clients, physical phone browsers and software keyboards, Electron shell behavior, macOS/Windows, and remote relay/tunnel connections were not exercised on this Linux VM. Viewport checks used desktop Chrome resized to phone widths. Other providers were not exercised; this change only affects the shared web footer layout.
Native clients can't exercise this footer: the change is apps/web only, and the mobile app runs its own palette (apps/mobile/src/features/keyboard/CommandPalette.tsx) with no kbd hint row, so no iOS or Android build renders this element.
Head 00fbc3e2bce9d26e0ef39e9e84a28d2619ede790.
Note
🤖 deepseek-v4.1-flash responding on behalf of Lucky.