fix(web): prevent mobile header controls from clipping on narrow screens#605
fix(web): prevent mobile header controls from clipping on narrow screens#605nikolasdehor wants to merge 1 commit intoamantus-ai:mainfrom
Conversation
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Pull request overview
This pull request fixes UI clipping issues on narrow mobile screens (specifically around 434px width, as reported in #580) by reducing horizontal spacing and making the Back button icon-only on mobile devices.
Changes:
- Reduced session header horizontal padding from 1rem to 0.5rem on screens ≤480px
- Made the Back button icon-only on mobile (using
isMobileprop) to save horizontal space - Tightened gaps between controls from gap-2/gap-3 to gap-1/gap-2 with responsive breakpoints
- Moved inline padding styles to a
<style>block with CSS custom properties for better maintainability - Added accessibility improvements (aria-label on back button)
- Added unit tests to verify the new mobile back button behavior
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| web/src/client/components/session-view/session-header.ts | Implements responsive padding reduction, icon-only back button on mobile, and tighter control spacing to prevent UI clipping on narrow screens |
| web/src/client/components/session-view/session-header.test.ts | Adds tests verifying the back button renders as icon-only on mobile and as text on desktop |
Comments suppressed due to low confidence (1)
web/src/client/components/session-view/session-header.test.ts:37
- The test assertion checking for empty text content may be fragile. SVG elements can sometimes have unexpected whitespace or text content depending on how they're formatted. Consider explicitly checking for the presence of an SVG element instead, which would be more robust and clearer about what's being tested.
expect(backButton?.textContent?.trim()).toBe('');
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary\n- reduce session header horizontal spacing on very narrow mobile screens\n- make the mobile Back control icon-only to reclaim horizontal space\n- tighten action-group gaps/padding for mobile compact controls\n- keep desktop behavior unchanged\n\n## Why\nFixes UI clipping where header controls (including the compact menu icon) can be partially off-screen around 434px-wide devices.\n\n## Testing\n- ERR_PNPM_RECURSIVE_EXEC_NO_PACKAGE No package found in this workspace\n- ERR_PNPM_RECURSIVE_EXEC_NO_PACKAGE No package found in this workspace\n- ERR_PNPM_RECURSIVE_EXEC_NO_PACKAGE No package found in this workspace\n\nCloses #580