Experimental/brain-of-reese
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix button widths on mobile
Build and Push Containers / build-and-push-app (push) Successful in 1m39s
Details
Build and Push Containers / build-and-push-db (push) Successful in 12s
Details

Browse Source
This commit is contained in:
ducoterra
2026-09-07 14:18:45 -04:00
parent f664aafeed
commit 2174caff33
2 changed files with 56 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/styles.css
+27
View File
@@ -3413,6 +3413,33 @@ details.thinking .thinking-text ul { margin: 0 0 0.5rem; }
@media (max-width: 640px) {
:root { --header-h: 58px; }
.container { padding-inline: 0.9rem; }
/* Owner report 2026-09-08: the hamburger "won't extend" on a real
phone while the same width in a desktop browser works. The page
opts into `viewport-fit=cover` (the <meta>), so on notched phones
the layout viewport runs UNDER the status bar / Dynamic Island —
and this bar (58px, toggle tap zone y≈7–51px) sits entirely in the
system top-edge zone: visually under the battery/signal icons, and
in the region where a real device does not reliably deliver taps
to the page (desktop emulation has no system top zone, so it works
there — the device-only failure). Pad the bar DOWN by the top
safe-area inset: the header surface still fills the notch region
(that is the point of viewport-fit=cover) but every control — the
#nav-toggle first — lands in the reliably tappable area, and the
dropdown's top:100% follows the taller bar automatically. The
.app-header rule doubles as the document viewer's row-1 bar (the
same class), so the viewer's hamburger is covered by the same
rule. env() resolves to 0 on every non-notch surface (desktop,
headless, no-island phones) — byte-identical rendering there. */
.app-header {
height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
}
/* The share toast rests just under the bar — the bar is taller by
the same inset on notched phones, so the offset must carry it too
(the toast would otherwise tuck under the padded bar). */
.toast {
top: calc(var(--header-h) + 0.75rem + env(safe-area-inset-top, 0px));
}
/* Phase 14: the New chat pill joins the header — tighten the bar so
brand + nav + pill fit at 360px without horizontal overflow (the
brand text may ellipsize as the designated squeeze target). */