From 989419665e873d1b81965a58bf8d9aa2a5989636 Mon Sep 17 00:00:00 2001 From: Jack Levy Date: Sun, 15 Mar 2026 21:36:46 -0400 Subject: [PATCH] chore: add robots.txt, update docs with mobile layout fix - Add frontend/public/robots.txt: allow public pages, block auth/user-private routes and /api/ - ROADMAP.md: add mobile layout fix to UX & Polish shipped items - TROUBLESHOOTING.md: add section on Android Chrome viewport overflow root cause and fix Authored by: Jack Levy --- ROADMAP.md | 1 + TROUBLESHOOTING.md | 38 ++++++++++++++++++++++++++++++++++++++ frontend/public/robots.txt | 18 ++++++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 frontend/public/robots.txt diff --git a/ROADMAP.md b/ROADMAP.md index b9ebb31..ae5375e 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -71,6 +71,7 @@ - [x] Collapsible sidebar — icon-only mode, `localStorage` persistence - [x] Favicon — Landmark icon - [x] LLM Batch API — OpenAI + Anthropic async batch endpoints; 50% cost reduction; state tracked in `AppSetting("llm_active_batch")` +- [x] Mobile layout fix — `min-w-0` on flex content column in `AuthGuard` prevents long URLs from forcing viewport overflow on Android Chrome; app shell switched to `fixed inset-0` for stable visual-viewport anchoring --- diff --git a/TROUBLESHOOTING.md b/TROUBLESHOOTING.md index 6f53411..71f1c6e 100644 --- a/TROUBLESHOOTING.md +++ b/TROUBLESHOOTING.md @@ -132,6 +132,44 @@ docker compose logs -f api worker --- +## Mobile page wider than viewport (Android Chrome zoom / dead space) + +**Symptom** + +On Android Chrome, a page zooms out to fit an oversized layout. The content is readable but the bottom third of the screen is dead space (background color only). The same page looks fine on all other devices, and other pages on the same device are fine. + +**Root cause** + +Flex items default to `min-width: auto`, meaning they cannot shrink below their content's natural width. If any descendant (e.g. a long URL in an input field) is wider than the viewport, the containing flex column expands to match, making the entire page layout wider than the viewport. Android Chrome then zooms the viewport out to fit the full layout width — which makes the layout taller than the visual viewport, leaving dead space at the bottom. + +**Fix** + +Add `min-w-0` (Tailwind) / `min-width: 0` (CSS) to the flex item that forms the main content column. This allows the column to shrink to zero, enabling children to wrap and truncate normally. + +In `AuthGuard.tsx` the content column needs both `flex-1` and `min-w-0`: + +```tsx +// Before — missing min-w-0 +
+ +// After +
+``` + +Also switch the outer shell from `h-dvh` to `fixed inset-0 flex overflow-hidden` so the shell is anchored to the visual viewport directly (avoids `dvh` staleness issues on Android): + +```tsx +// Before +
+ +// After +
+``` + +**General rule**: any `flex-1` column that can contain user-supplied text or long URLs should also carry `min-w-0`. + +--- + ## Inspecting the database ```bash diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt new file mode 100644 index 0000000..8859964 --- /dev/null +++ b/frontend/public/robots.txt @@ -0,0 +1,18 @@ +User-agent: * +Allow: / +Allow: /bills +Allow: /bills/ +Allow: /members +Allow: /members/ +Allow: /topics +Allow: /how-it-works +Allow: /share/ + +Disallow: /login +Disallow: /register +Disallow: /settings +Disallow: /notifications +Disallow: /following +Disallow: /collections +Disallow: /alignment +Disallow: /api/