Mobile zoom-lock + top-bar icon fixes (v0.1.0:97)
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
@@ -108,11 +108,11 @@ Subsystem rules live in `docs/guides/` and lazy-load in Claude Code via `.claude
|
||||
|
||||
## Current state
|
||||
|
||||
_**Box live at v0.1.0:95 (deployed 2026-06-20)** — the full mobile-first redesign (Phases 0–7 + P3b + drag-reorder + **8a–8i**) **+ installable PWA (Option A)** are now **in production** (was the whole deploy-pending set; shipped in one s9pk, migration `0007_pipeline_stages_v2` applied clean on the box, server up on :8080, no boot errors). **The fundraising grid + email capture is the canonical system of record.** Active thread: **mobile-first redesign — DEPLOYED; next is Grant's real-phone device-test** (light/dark + install-to-home-screen/standalone — nothing verified on a real phone yet). Build reference: `design/phase8-conformance.md` (the 8a–8i spec; fully landed — archive-eligible). History: git log + `start9/0.4/startos/versions/`._
|
||||
_**Box live at v0.1.0:97 (deployed 2026-06-20)** — the full mobile-first redesign (Phases 0–7 + P3b + drag-reorder + **8a–8i**) **+ installable PWA (Option A)** went live at v95; **v96** brought the login/first-admin screen into mobile/PWA conformance; **v97** is the first round of Grant's real-phone feedback — viewport zoom-lock (`maximum-scale=1` + `user-scalable=no`: no pinch, no iOS auto-zoom-on-focus for our <16px inputs; app-wide) + mobile top-bar fixes (account initial flex-centered & dc-aligned; quick-log pencil bumped to `--text-secondary` for affordance). All CSS-only, desktop untouched. **The fundraising grid + email capture is the canonical system of record.** Active thread: **mobile-first redesign DEPLOYED; Grant is now real-phone device-testing and reporting polish items** (v97 is the first batch). Build reference: `design/phase8-conformance.md` (the 8a–8i spec; fully landed — archive-eligible). History: git log + `start9/0.4/startos/versions/`._
|
||||
|
||||
- **Mobile redesign — 4 core surfaces built (Grid · Contacts · Pipeline · Reminders), each a rules-of-hooks-safe `useIsMobile()` → `Mobile*`/`Desktop*` pair (desktop untouched).** Foundation: bottom-tab bar + `:root` mobile vars; 4-stage enum; derived grid signals injected-on-GET/stripped-on-write at both points; mobile writes use **one-row endpoints only** (log-communication, pipeline link/stage, reminders, `update-row`) — never whole-grid PUT.
|
||||
- **Phase 8 complete (8a–8i)** — all mobile cards/details/sheets/shell match the dc anatomy; the durable per-primitive record is the **Design convention's primitives list**, per-phase detail in git log. Installable PWA is a durable Conventions bullet (+ `ROADMAP.md` "Mobile PWA").
|
||||
- **Live (deployed):** **mobile-first redesign (Phases 0–8i) + light theme + installable PWA + 4-stage pipeline funnel (migration 0007) — all v95 (2026-06-20)**; W2 NL query (v94); W1 reminders (v93); grid Pipeline (v88); Matrix intake + Gmail capture (DWD) + daily digest; Thesis/Architect (dual-approval); outreach — all draft-only.
|
||||
- **Live (deployed):** **mobile zoom-lock + top-bar polish (v97, 2026-06-20)**; **login page mobile/PWA conformance (v96)**; **mobile-first redesign (Phases 0–8i) + light theme + installable PWA + 4-stage pipeline funnel (migration 0007) — all v95 (2026-06-20)**; W2 NL query (v94); W1 reminders (v93); grid Pipeline (v88); Matrix intake + Gmail capture (DWD) + daily digest; Thesis/Architect (dual-approval); outreach — all draft-only.
|
||||
- **Tests:** **40/40 backend green** (`python3 backend/run_tests.py`), `py_compile` clean. Mobile surfaces interaction-verified via throwaway 375px jsdom harnesses (deleted after); harness recipe + the `Simulate.change` input gotcha live in the `mobile-surface-verification` memory.
|
||||
- **Next — Grant's real-phone device-test (v95 is live):** the whole mobile set + PWA shipped 2026-06-20. Remaining gate is **device-testing on a real phone**: light/dark across the 4 surfaces, **install-to-home-screen → standalone launch** (Safari Share → Add to Home Screen; expect full-screen, dark status bar, T31 icon), safe-area/tab-bar clearance, and the swipe/sheet interactions (only smoke/jsdom-verified so far). Known PWA item to eyeball: the iOS status bar is fixed `black` (light-theme cosmetic seam — see Open/risks).
|
||||
- **Open / risks:** all mobile work + light theme **built but never deployed or device-tested** (smoke/jsdom only); `MobileDetailRow` unused-but-retained (legacy-usage sweep); Pipeline detail "Committed" tile shows grid-committed not deal-expected (forecast in a footnote); `handle_get_opportunity` (single-opp GET) deliberately does NOT inject `existing_investor`/`last_contact_date` — no surface needs it (the card uses the list injection; the detail derives `existing` from the contact fetch); W2 happy-path only; **Claude/Architect path unverified live on the box**; v2.0 reserve-asset spine **not canonical**; doc drift — `crm-overview.md`/`EVALUATION.md` still call `lp_profiles` live; **PWA iOS status bar is fixed `black` at launch** (`apple-mobile-web-app-status-bar-style`) — in *light* theme it's a black strip above the light header (proper fix = `black-translucent` + header top-safe-area padding + theme-synced `theme-color`; deferred, validate on-device; dark is default so low-priority); PWA manifest/icons sent with no `Cache-Control` (consistent with all static routes — a manifest change post-install may be served stale by iOS until it re-fetches).
|
||||
- **Next — Grant's real-phone device-test (v97 is live):** the whole mobile set + PWA + login + top-bar fixes shipped 2026-06-20. **Confirm on v97:** tapping a field no longer zooms the page; pinch is disabled; top-bar **account initial is centered** and the **quick-log pencil is visible**. Plus the standing gate: light/dark across the 4 surfaces **+ login** (375px gutters, card not under the status bar in standalone), **install-to-home-screen → standalone launch** (Safari Share → Add to Home Screen; expect full-screen, dark status bar, T31 icon), safe-area/tab-bar clearance, swipe/sheet interactions (only smoke/jsdom-verified so far). Known PWA item to eyeball: the iOS status bar is fixed `black` (light-theme cosmetic seam — see Open/risks).
|
||||
- **Open / risks:** all mobile work + light theme **deployed (v95/v96/v97) but real-phone device-test only just starting** (Grant); **viewport now `user-scalable=no`** — intentional native feel for this internal tool; OS accessibility zoom still works, but it's a known a11y trade-off if scope ever widens beyond the team; **quick-log pencil deviates from the dc `--t3` spec → `--text-secondary`** on Grant's "can't see it" report (the dc grey thin-outline reads as empty next to the color sun emoji; confirm on-device it now reads clearly); `.login-title` CSS (`index.html:1869`) is **dead** (defined, never rendered — login uses logo + subtitle; trivial removal candidate); `MobileDetailRow` unused-but-retained (legacy-usage sweep); Pipeline detail "Committed" tile shows grid-committed not deal-expected (forecast in a footnote); `handle_get_opportunity` (single-opp GET) deliberately does NOT inject `existing_investor`/`last_contact_date` — no surface needs it (the card uses the list injection; the detail derives `existing` from the contact fetch); W2 happy-path only; **Claude/Architect path unverified live on the box**; v2.0 reserve-asset spine **not canonical**; doc drift — `crm-overview.md`/`EVALUATION.md` still call `lp_profiles` live; **PWA iOS status bar is fixed `black` at launch** (`apple-mobile-web-app-status-bar-style`) — v96 fixed the *login-card* collision (it now respects `env(safe-area-inset-top)`), but the global header still gets a black strip above it in *light* theme (proper fix = `black-translucent` + header top-safe-area padding + theme-synced `theme-color`; deferred, validate on-device; dark is default so low-priority); PWA manifest/icons sent with no `Cache-Control` (consistent with all static routes — a manifest change post-install may be served stale by iOS until it re-fetches).
|
||||
|
||||
+14
-5
@@ -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); }
|
||||
|
||||
@@ -61,8 +61,9 @@ export const PACKAGE_TITLE = 'Ten31 Database'
|
||||
// * 0.1.0:93 (natural-language query, W2: read-only "ask the database in plain English" — a curated, parameterized query catalog [backend/nl_query/] behind a strict slot validator [the trust boundary — no generic SQL / dynamic identifiers]; a local-Qwen translator maps a question→{intent,slots} via Spark Control so the question never leaves the box [no Claude, no redaction]; new endpoints POST /api/query/nl + GET /api/query/catalog [require_bot_or_admin, audited entity_type='nl_query'], results never returned to any model; no schema change. The Matrix Q&A client [dedicated room + ?/@bot trigger] ships on the Spark, not the s9pk)
|
||||
// * 0.1.0:94 (NL-query correctness fix: the comms_by_user + email_counts_by_user intents were counting/listing a user's ENTIRE captured sent corpus [internal/vendor/personal], not only email to a matched investor — they lacked the EXISTS email_investor_links gate that recent_emails + the Communications panel use. Added the matched-only gate to both [+ a regression test seeding an unmatched sent email]; no schema change, no UI change)
|
||||
// * 0.1.0:95 (mobile-first redesign goes live + installable PWA. The Grid, Pipeline, Reminders & Contacts screens are touch-native on phones below 768px [safe-area bottom-tab nav, card lists, drag-dismiss bottom sheets, swipe actions, full-screen Grid detail, SVG tab icons + ·Ten31· wordmark], with an app-wide light theme + toggle. Installable home-screen PWA: manifest.webmanifest [standalone display, #0b1118 theme] + square/apple-touch icons + a pre-auth /manifest.webmanifest route; iOS-first, no service worker. Pipeline funnel v2: 4-stage lead→engaged→diligence→commitment [in-app migration 0007] with derived grid signals [pipeline_stage/existing_investor/recency] injected-on-GET, stripped-on-write. Desktop UI unchanged; no LLM path. Bundles the previously deploy-pending mobile Phases 0–8 + drag-reorder views + the PWA)
|
||||
// * Current: 0.1.0:96 (login page mobile/PWA conformance — the one surface the v95 mobile redesign skipped. CSS-only: 100vh→100dvh [dynamic viewport, fixes the centered card tucking under the iOS standalone status bar], a <768px media query adding 16px screen gutters + env[safe-area-inset] top/bottom clearance + touch-sized fields [inputs 46px/15px, button 46px], full-bleed card on small phones, and the §4 card depth shadow on the login card to match .section. No markup/JS/schema change; desktop login unchanged)
|
||||
export const PACKAGE_VERSION = '0.1.0:96'
|
||||
// * 0.1.0:96 (login page mobile/PWA conformance — the one surface the v95 mobile redesign skipped. CSS-only: 100vh→100dvh [dynamic viewport, fixes the centered card tucking under the iOS standalone status bar], a <768px media query adding 16px screen gutters + env[safe-area-inset] top/bottom clearance + touch-sized fields [inputs 46px/15px, button 46px], full-bleed card on small phones, and the §4 card depth shadow on the login card to match .section. No markup/JS/schema change; desktop login unchanged)
|
||||
// * Current: 0.1.0:97 (mobile top-bar polish + native zoom behaviour. Viewport meta gains maximum-scale=1 + user-scalable=no: kills pinch-zoom AND the iOS auto-zoom-on-focus that jerked the page in on every <16px input tap [app-wide, not just login]; OS accessibility zoom still works. Top-bar account initial now flex-centered + dc-aligned [IBM Plex Mono, accent-light, 13px — was defaulting to inline/baseline, off-center]. Quick-log pencil bumped --text-muted→--text-secondary for real affordance [the dc t3 grey thin-outline read as empty next to the color sun emoji on-device]. CSS-only; no JS/schema change)
|
||||
export const PACKAGE_VERSION = '0.1.0:97'
|
||||
|
||||
export const DATA_MOUNT_PATH = '/data'
|
||||
export const WEB_PORT = 8080
|
||||
|
||||
@@ -57,8 +57,9 @@ import { v_0_1_0_93 } from './v0.1.0.93'
|
||||
import { v_0_1_0_94 } from './v0.1.0.94'
|
||||
import { v_0_1_0_95 } from './v0.1.0.95'
|
||||
import { v_0_1_0_96 } from './v0.1.0.96'
|
||||
import { v_0_1_0_97 } from './v0.1.0.97'
|
||||
|
||||
export const versionGraph = VersionGraph.of({
|
||||
current: v_0_1_0_96,
|
||||
other: [v_0_1_0_39, v_0_1_0_40, v_0_1_0_41, v_0_1_0_42, v_0_1_0_43, v_0_1_0_44, v_0_1_0_45, v_0_1_0_46, v_0_1_0_47, v_0_1_0_48, v_0_1_0_49, v_0_1_0_50, v_0_1_0_51, v_0_1_0_52, v_0_1_0_53, v_0_1_0_54, v_0_1_0_55, v_0_1_0_56, v_0_1_0_57, v_0_1_0_58, v_0_1_0_59, v_0_1_0_60, v_0_1_0_61, v_0_1_0_62, v_0_1_0_63, v_0_1_0_64, v_0_1_0_65, v_0_1_0_66, v_0_1_0_67, v_0_1_0_68, v_0_1_0_69, v_0_1_0_70, v_0_1_0_71, v_0_1_0_72, v_0_1_0_73, v_0_1_0_74, v_0_1_0_75, v_0_1_0_76, v_0_1_0_77, v_0_1_0_78, v_0_1_0_79, v_0_1_0_80, v_0_1_0_81, v_0_1_0_82, v_0_1_0_83, v_0_1_0_84, v_0_1_0_85, v_0_1_0_86, v_0_1_0_87, v_0_1_0_88, v_0_1_0_89, v_0_1_0_90, v_0_1_0_91, v_0_1_0_92, v_0_1_0_93, v_0_1_0_94, v_0_1_0_95],
|
||||
current: v_0_1_0_97,
|
||||
other: [v_0_1_0_39, v_0_1_0_40, v_0_1_0_41, v_0_1_0_42, v_0_1_0_43, v_0_1_0_44, v_0_1_0_45, v_0_1_0_46, v_0_1_0_47, v_0_1_0_48, v_0_1_0_49, v_0_1_0_50, v_0_1_0_51, v_0_1_0_52, v_0_1_0_53, v_0_1_0_54, v_0_1_0_55, v_0_1_0_56, v_0_1_0_57, v_0_1_0_58, v_0_1_0_59, v_0_1_0_60, v_0_1_0_61, v_0_1_0_62, v_0_1_0_63, v_0_1_0_64, v_0_1_0_65, v_0_1_0_66, v_0_1_0_67, v_0_1_0_68, v_0_1_0_69, v_0_1_0_70, v_0_1_0_71, v_0_1_0_72, v_0_1_0_73, v_0_1_0_74, v_0_1_0_75, v_0_1_0_76, v_0_1_0_77, v_0_1_0_78, v_0_1_0_79, v_0_1_0_80, v_0_1_0_81, v_0_1_0_82, v_0_1_0_83, v_0_1_0_84, v_0_1_0_85, v_0_1_0_86, v_0_1_0_87, v_0_1_0_88, v_0_1_0_89, v_0_1_0_90, v_0_1_0_91, v_0_1_0_92, v_0_1_0_93, v_0_1_0_94, v_0_1_0_95, v_0_1_0_96],
|
||||
})
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { VersionInfo } from '@start9labs/start-sdk'
|
||||
|
||||
// Mobile top-bar polish + native zoom behaviour (CSS-only; no JS/schema change).
|
||||
// - Viewport meta gains maximum-scale=1 + user-scalable=no: disables pinch-zoom and, more
|
||||
// importantly, the iOS auto-zoom-on-focus that jerked the page in whenever a sub-16px input
|
||||
// was tapped (app-wide — our fields are 13–15px). OS-level accessibility zoom still works.
|
||||
// - Top-bar account initial is now flex-centered and dc-aligned (IBM Plex Mono, accent-light,
|
||||
// 13px); it was defaulting to inline/baseline and rendered off-center.
|
||||
// - Quick-log pencil colour bumped --text-muted -> --text-secondary so the action button reads
|
||||
// clearly on-device (the dc t3 thin-outline grey read as empty next to the colour sun emoji).
|
||||
export const v_0_1_0_97 = VersionInfo.of({
|
||||
version: '0.1.0:97',
|
||||
releaseNotes: {
|
||||
en_US: [
|
||||
'Mobile polish: the app no longer zooms in when you tap a field or pinch (it now behaves',
|
||||
'like a native app), and the top-bar account initial and quick-log pencil icon render',
|
||||
'correctly. Desktop is unchanged.',
|
||||
].join(' '),
|
||||
},
|
||||
migrations: { up: async () => {}, down: async () => {} },
|
||||
})
|
||||
Reference in New Issue
Block a user