Repository navigation
Fix the web app's phone layout: top bar, menu and broken lists - #22
Closed
EmotiveImpact wants to merge 3 commits into
Closed
EmotiveImpact wants to merge 3 commits into
EmotiveImpact wants to merge 3 commits into
Conversation
On phone widths the header showed an empty white search bar, a logo circle that read as a loading spinner, and the page description squeezed into a narrow column. It now uses one slim row: menu, page title, then search, account and notifications as 40px icon buttons. Home keeps its greeting on a second line. The full-width search row only appears where its label is visible (701 to 850px). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017hXxn83KKsFoA4NiW26jSi
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
Author
|
The Vercel preview for
So this looks like a problem in the Vercel project or account (for example a limit or a settings change), not in the code. The build logs need a Vercel login, which I don't have. I'll fix it here if the deployment shows something in this diff. Generated by Claude Code |
- The menu button now opens the sidebar as a drawer from the left, with the commune switcher and account, instead of a bottom "More" sheet. Escape closes the commune list first, then the drawer. - Home's "Needs you" list (also /inbox) keeps its layout; the commune label only shows when items come from more than one commune. - Hub: the "View all" links stack, and the member avatars no longer overlap their initials. - Expenses: the status chips get their own row up to 850px instead of hiding behind the filter. Amounts no longer wrap mid-number. - Settle shows "due 5 Oct" rather than "due 2026-10-05". - Notes filter is full width on phones. - Every text field is 16px on phones so iOS Safari stops zooming in on focus. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017hXxn83KKsFoA4NiW26jSi
EmotiveImpact
changed the title
In basic navigation mode the sidebar has no Members or Templates link, and the old phone sheet was the only other route to them. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017hXxn83KKsFoA4NiW26jSi
This was referenced Oct 9, 2026
EmotiveImpact
pushed a commit
that referenced
this pull request
Oct 11, 2026
The phone top bar is now one slim navy row: the menu, the page's name, then search, notifications and you as plain icons. On Home it carries no name and runs into the navy band under the sentence; when all square it sits over the photo until the page scrolls. The menu button opens the sidebar as a drawer from the left (from PR #22), with Members and Templates added in basic mode. It replaces the bottom More sheet; the page behind is inert while it is open and focus returns to the menu button when it closes. The four tabs use the sidebar's icons with the current one in a pill. Needs you shows its first two on a phone with Show more, and when all square the communes come before recent activity, as drawn. Also from PR #22: the full-width search row only at 701 to 850px, list toolbars wrap their chips onto their own row, phone text fields are 16px, and the Hub's avatars and View links no longer overlap. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PxTvnaAvCxprncxCVPRh7u
Owner
Author
|
Closing without merging: the phone top bar and side menu from this PR were carried into #38, which is now merged into main. Generated by Claude Code |
This branch had an error being deployed
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
2 participants
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.
Requested by Edem · project thread
Before: on a phone, the web app's top bar took up about a quarter of the screen. It had an empty white search bar, a logo circle that looked like a loading spinner, and a squeezed page description. The menu button opened a bottom sheet with internal-sounding copy that didn't match the desktop sidebar. Home's "Needs you" list broke apart on /inbox, the Hub's links ran together, the Expenses filter chips were hidden behind the search box, Settle showed raw ISO dates, and iOS Safari zoomed the page every time a form field got focus.
After: the top bar is one slim row (menu, title, then search, account and notifications). The menu button opens the desktop sidebar as a drawer from the left, with the commune switcher and account. The lists, links, filters and dates listed above all lay out properly at 320 to 430px, and form fields are 16px on phones so focusing one no longer zooms the page.
Edem picked the single-row top bar (option A) from three prototypes.
How
Shell.tsx:MoreSheetnow rendersSidebarin drawer mode (role="dialog", close button, Escape closes it, and it only mounts while open). In basic navigation mode the drawer also lists Members and Templates, because the old sheet was the only other route to them. The old.a-more*sheet styles are removed fromapp.cssandoverrides.css. The header logo mark, which was only ever shown on phones, is gone.design-system.css: the phone header, the drawer, list toolbars that wrap at 850px and below, 16px fields on phones, and amounts that don't break mid-number.overrides.css: the full-width header search row now applies only from 701 to 850px, where its label shows. Home's card and row rules also cover#home-inbox.Home.tsx: the commune label on "Needs you" rows only appears when the items come from more than one commune.Hub.css: the "View all" links stack, and the avatar overlap is halved so initials aren't clipped.Money.tsx: Settle uses the formatted due date.design-tokens.test.ts: the bottom sheet corner assertion is removed along with the sheet.Checked
pnpm buildandpnpm testinapps/webpass (23 files, 260 tests).?native=1), and the drawer's open, switch, Escape and navigate behaviour. All of this ran against a local API with the lifecycle sample data.🤖 Generated with Claude Code
https://claude.ai/code/session_017hXxn83KKsFoA4NiW26jSi