feat(phase-10): mobile responsive verification#80
Merged
Conversation
CSS-only fixes in src/index.css Phase 10 block — no component changes. - Touch targets >=44px for drawer close, settings close, town row edit, TownManager actions, GlobalSearch history rows, donate button, chevron. - iOS zoom prevention: search input rendered at 16px on stacked layouts. - Hero/category title overflow: word-break + further font shrink at <=480px. - Recent activity row drops category label at <=720px so name+time fit. - Topbar wraps at <=480px; sidebar foot links get full tap height when stacked. - GlobalSearchDropdown kbd-hint footer hidden at <=720px (no hardware keyboard). Verified: build clean, 63 tests pass, lint clean. All Phase 10 checklist items checked in docs/v0.9-plan.md. CLAUDE.md updated with 980/720/700/480 breakpoint hierarchy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR is the Phase 10 mobile-responsive verification pass for the v0.9.0-beta UI revamp. It adds a CSS-only polish block in src/index.css to tighten small-screen behavior across the app shell, search, TownManager, recent activity, and headings, while also updating release-planning and changelog documentation to mark the phase as shipped.
Changes:
- Added new responsive CSS rules for the 980px, 720px, and 480px breakpoints to improve tap targets, text overflow handling, spacing, and mobile wrapping behavior.
- Marked Phase 10 as shipped in the v0.9 plan and documented the breakpoint hierarchy in
CLAUDE.md. - Added Phase 10 release notes to
CHANGELOG.md.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
src/index.css |
Adds the Phase 10 mobile polish media-query block for responsive layout and interaction tweaks. |
docs/v0.9-plan.md |
Updates the implementation plan to mark Phase 10 complete and checks off its verification items. |
CLAUDE.md |
Documents the responsive breakpoint hierarchy and Phase 10 CSS-only scope. |
CHANGELOG.md |
Adds release-note entries describing the mobile responsive polish work. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1463
to
+1464
| /* Hide kbd hint footer on touch devices (no keyboard) */ | ||
| .ac-gs-foot { display: none; } |
| --- | ||
|
|
||
| ### Phase 10 — Mobile Responsive Verification ⏳ pending | ||
| ### Phase 10 — Mobile Responsive Verification ✅ shipped (PR #TBD) |
| ## [Unreleased] — v0.9.0-beta (in progress) | ||
|
|
||
| ### Added — Phase 10: Mobile responsive polish | ||
| - **Mobile breakpoint hierarchy** documented (`980 / 720 / 700 / 480`). Surgical CSS additions to `src/index.css` Phase 10 block address touch targets and overflow at iPhone SE (390px) through iPad portrait (768px). |
Comment on lines
+1441
to
+1443
| /* Recent row: allow category label to truncate before time */ | ||
| .ac-recent-row { gap: 8px; padding: 12px; } | ||
| .ac-recent-cat { display: none; } |
Comment on lines
+1432
to
+1434
| /* Search input padding bigger for tap */ | ||
| .ac-search { padding: 10px 14px; } | ||
| .ac-search input { font-size: 16px; /* prevent iOS zoom */ } |
Owner
Author
|
Filed #81 — art tab still uses DetailModal, blocks v0.9 release per Bea's call. |
This was referenced May 4, 2026
Owner
Author
|
Both fixes landed in f47acce:
Build, tests (63/63), and lint all green. Filed issue updates for the two deferred a11y findings: kbd hint folded into #76, new issue #82 filed for HomeTab category aria. Skipping the search-input tap-target finding — wrapper padding is for visual spacing, the input itself has the ≥44px area. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Phase 10 of the v0.9.0-beta UI revamp — mobile responsive verification pass. Audited every surface at 360/375/390/414px and added a small block of CSS-only fixes (no component changes). This is the final phase before cutting the release branch.
Surfaces verified
.ac-meter-5)Fixes (all in
src/index.css, new Phase 10 block lines 1426–1495).ac-tm-close,.ac-settings-close,.ac-tm-row-edit,.ac-tm-ghost/-primary/-danger,.ac-gs-history-row,.ac-gs-row,.ac-donate-btn,.ac-chevron,.ac-foot-link.ac-search inputfont-size 16px on stacked layoutsword-breakon.ac-hero-headline+.ac-category-title; further font shrink ≤480px (hero 26 / category 28 / settings 32).ac-recent-rowdrops category label ≤720px;.ac-topbarwraps ≤480px.ac-gs-footkeyboard hints hidden ≤720px; tap-to-select uses existingonClick(GlobalSearchDropdown.tsx:342)Viewport sizes tested
360 (Android baseline), 375 (iPhone SE), 390 (iPhone 14), 414 (iPhone Pro Max), 768 (iPad portrait), 980 (breakpoint), 1180 (desktop).
Test plan
npm run build— passes, 38.17 kB CSSnpm test— 63/63 passingnpm run lint— 0 warningsDocs
docs/v0.9-plan.md— Phase 10 marked ✅, all 9 checklist boxes ticked, status line updatedCHANGELOG.md— Phase 10 entry under v0.9.0-betaCLAUDE.md— added 980/720/700/480 breakpoint hierarchy noteAfter this merges → cut
release/v0.9.0-beta.