grant/ten31-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile zoom-lock + top-bar icon fixes (v0.1.0:97)

Browse Source 
First round of Grant's real-phone feedback on the mobile redesign. CSS-only;
desktop untouched.

- Viewport: add maximum-scale=1.0 + user-scalable=no. Disables pinch-zoom and —
  the real fix — the iOS auto-zoom-on-focus that jerked the whole page in on every
  tap of a sub-16px input (our fields are 13-15px). The mobile surfaces are sized
  for phones, so nothing needs zooming; OS-level accessibility zoom still works.
- Top-bar account initial: was rendering off-center because .account-btn lacked
  flex centering (it fell back to inline/baseline). Add inline-flex centering and
  align to the dc spec (IBM Plex Mono, accent-light, 13px, GridApp.dc:60).
- Quick-log pencil: bump --text-muted -> --text-secondary. Markup/color otherwise
  match the dc reference exactly, but the dc's thin grey outline reads as empty
  next to the color sun emoji on-device; the brighter neutral gives the action
  button real affordance.

Also records the v97 deploy + these items in AGENTS.md Current state.
This commit is contained in:
Keysat
2026-06-20 09:51:27 -05:00
parent 0aca8848ee
commit be40520c3d
5 changed files with 45 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+14 -5
View File
@@ -4,8 +4,13 @@
<meta charset="UTF-8">
<!-- viewport-fit=cover lets env(safe-area-inset-*) return real values on notched
iPhones, so the bottom tab bar's existing safe-area padding actually clears the
home indicator when launched as a standalone PWA. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
home indicator when launched as a standalone PWA.
maximum-scale=1 + user-scalable=no give the app a native, fixed-layout feel: no
pinch-zoom, and (the important one) no iOS auto-zoom-on-focus for sub-16px inputs —
our fields are 13–15px, which would otherwise jerk the page in on every tap. The
mobile surfaces are sized for phones, so nothing needs zooming; OS-level
accessibility zoom (triple-tap) still works for low-vision users. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Ten31 database</title>
<link rel="icon" type="image/png" href="/assets/ten31-inverted-square.png">
<link rel="shortcut icon" href="/assets/ten31-inverted-square.png">
@@ -2183,9 +2188,11 @@
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--border-strong);
background: var(--bg-panel-elevated);
color: var(--text-secondary);
font-weight: 600; font-size: 14px;
color: var(--accent-light);
font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px; line-height: 1;
cursor: pointer;
/* center the initial — was defaulting to inline/baseline (dc GridApp:60) */
display: inline-flex; align-items: center; justify-content: center;
}
/* P6 theme toggle — bar variant (desktop sidebar footer), icon variant (mobile top bar) */
.theme-toggle-bar {
@@ -2547,7 +2554,9 @@
.quicklog-btn {
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--border); background: var(--bg-panel-elevated);
color: var(--text-muted); cursor: pointer;
/* dc spec is --t3/--text-muted, but a thin grey outline reads as empty next to the
color sun emoji on-device; --text-secondary gives the action button real affordance. */
color: var(--text-secondary); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.quicklog-btn:active { background: var(--bg-hover); }