From 1533e4886d02b8c5b3780e2e688bdba96f53acb8 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 7 Oct 2026 03:14:25 +0000 Subject: [PATCH 1/3] Tidy the web app's top bar on phones 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) Claude-Session: https://claude.ai/code/session_017hXxn83KKsFoA4NiW26jSi --- apps/web/src/shell/Shell.tsx | 1 - apps/web/src/styles/app.css | 36 +++------------------------ apps/web/src/styles/design-system.css | 14 ++++++++++- apps/web/src/styles/overrides.css | 4 +++ 4 files changed, 20 insertions(+), 35 deletions(-) diff --git a/apps/web/src/shell/Shell.tsx b/apps/web/src/shell/Shell.tsx index 47929bde..d6a26162 100644 --- a/apps/web/src/shell/Shell.tsx +++ b/apps/web/src/shell/Shell.tsx @@ -266,7 +266,6 @@ export function Header({ screen }: { screen: ScreenId }) { -

{pageTitle}

{pageLede ?

{pageLede}

: null} diff --git a/apps/web/src/styles/app.css b/apps/web/src/styles/app.css index d02d8a3c..7294903b 100644 --- a/apps/web/src/styles/app.css +++ b/apps/web/src/styles/app.css @@ -185,19 +185,6 @@ min-height: 0; } -.a-header-mark { - display: none; - width: 38px; - height: 38px; - padding: 10px; - box-sizing: border-box; - border-radius: 999px; - border: 1px solid var(--border); - background: #fff; - flex-shrink: 0; - object-fit: contain; -} - .a-wordmark { font-family: "DM Sans Variable", "DM Sans", sans-serif; font-size: 34px; @@ -3723,7 +3710,9 @@ button.a-item { display: none; } .a-header { - padding: 12px 16px; + min-height: 56px; + gap: 8px; + padding: 8px 12px; background: #1a1e2b; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: #f5f1ea; @@ -3736,15 +3725,6 @@ button.a-item { white-space: normal; overflow: visible; } - .a-header-mark { - display: block; - width: 38px; - height: 38px; - padding: 10px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.06); - } .a-header .a-icon-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); @@ -4024,16 +4004,6 @@ button.a-item { overflow: visible; } -.a-body.is-native .a-header-mark { - display: block; - width: 38px; - height: 38px; - padding: 10px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.06); -} - .a-body.is-native .a-header .a-icon-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); diff --git a/apps/web/src/styles/design-system.css b/apps/web/src/styles/design-system.css index ae6f4164..23ff4586 100644 --- a/apps/web/src/styles/design-system.css +++ b/apps/web/src/styles/design-system.css @@ -55,7 +55,19 @@ letter-spacing: -0.5px; } @media (max-width: 560px) { - .a-header-home { flex-wrap: wrap; } + /* Phone top bar: one slim row of menu, title and icon actions. The page + description stays on larger screens; Home keeps its greeting below. */ + .a-header .a-icon-btn, + .a-header .a-more-btn { width: 40px; height: 40px; } + .a-header .c-search-trigger { + width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center; align-items: center; + background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #f5f1ea; + } + .a-header-actions { margin-left: 0; } + .a-header:not(.a-header-home) .a-header-title h1 { font-size: 18px; } + .a-header:not(.a-header-home) .a-header-title p { display: none; } + .a-header-home { flex-wrap: wrap; row-gap: 10px; padding-bottom: 14px; } + .a-body.is-native .a-header-home .a-header-actions { margin-left: auto; } .a-header-home .a-header-title { order: 1; flex-basis: 100%; } .a-header-home .a-header-title h1 { white-space: normal; overflow-wrap: anywhere; } .a-header-home .c-search-trigger { margin-left: auto; } diff --git a/apps/web/src/styles/overrides.css b/apps/web/src/styles/overrides.css index a9b8353d..769ca6a5 100644 --- a/apps/web/src/styles/overrides.css +++ b/apps/web/src/styles/overrides.css @@ -176,6 +176,10 @@ body, @media (max-width: 850px) { .a-home-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } #home .a-week { grid-template-columns: 1fr; } +} +/* A full-width search row only where the trigger still shows its label; + narrower screens use the icon button from QuickSearch.css. */ +@media (min-width: 701px) and (max-width: 850px) { .a-body:not(.is-native) .a-header { flex-wrap: wrap; height: auto; min-height: 60px; } .a-body:not(.is-native) .a-search { display: flex; order: 3; flex: 1 0 100%; width: 100%; max-width: none; margin-top: 8px; background: var(--white); color: var(--ink-soft); } } From 5ba197fda17d9ac309224565e65069aba31bda7e Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 7 Oct 2026 03:33:13 +0000 Subject: [PATCH 2/3] Fix the phone menu and the worst phone layout faults - 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) Claude-Session: https://claude.ai/code/session_017hXxn83KKsFoA4NiW26jSi --- apps/web/src/screens/Home.tsx | 4 +- apps/web/src/screens/Hub.css | 6 +- apps/web/src/screens/Money.tsx | 2 +- apps/web/src/shell/Shell.tsx | 81 ++++---- apps/web/src/styles/app.css | 276 +------------------------- apps/web/src/styles/design-system.css | 39 ++++ apps/web/src/styles/overrides.css | 29 ++- apps/web/tests/design-tokens.test.ts | 5 +- 8 files changed, 100 insertions(+), 342 deletions(-) diff --git a/apps/web/src/screens/Home.tsx b/apps/web/src/screens/Home.tsx index fd9da2d8..c2875cdc 100644 --- a/apps/web/src/screens/Home.tsx +++ b/apps/web/src/screens/Home.tsx @@ -54,6 +54,8 @@ export function HomeScreen() { const others = places.filter(place => place.id !== first.id); const needs = places.flatMap((hub) => hub.now.map((item) => ({ hub, item }))) .sort((a, b) => (a.item.dueOn ?? "9999").localeCompare(b.item.dueOn ?? "9999")).slice(0, 6); + // Name the commune on each row only when the list spans more than one. + const severalCommunes = new Set(needs.map(({ hub }) => hub.id)).size > 1; const activity = places.flatMap((hub) => hub.activity.map((item) => ({ hub, item }))) .sort((a, b) => (Date.parse(b.item.createdAt ?? "") || 0) - (Date.parse(a.item.createdAt ?? "") || 0)).slice(0, 6); const incomplete = places.some((hub) => hub.activityState !== "ready"); @@ -71,7 +73,7 @@ export function HomeScreen() {
{needs.map(({ hub, item }, index) => ( +