From 6d72f5c77099ec74f06163b063ba622f00539018 Mon Sep 17 00:00:00 2001 From: ZDDC Date: Sun, 10 May 2026 20:12:17 -0500 Subject: [PATCH] feat(responsive): shared narrow-viewport baseline for the header chrome MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Only transmittal had any @media (max-width) rules; the other seven tools silently break below ~900px. Adds a baseline shared rule that every tool inherits — desktop-first stays the same, but a tablet in landscape or a window split next to a document remains usable. @media (max-width: 800px): - tighter header padding + gaps - .app-header__title drops 18px → 16px - .build-timestamp inside .header-title-group hidden (it's traceability info, not a primary affordance — still reachable via help panel) - header text buttons get a smaller padding so they fit @media (max-width: 480px) phone-width: - .app-header switches to column layout - .header-left and .header-right each span full width with justify-content: space-between prefers-reduced-motion was already covered for the page-load stagger. Each tool can still override in its own css/layout.css; this is the shared floor. Co-Authored-By: Claude Opus 4.7 (1M context) --- shared/base.css | 59 ++++++++++++++++++++++++++++++ zddc/internal/handler/tables.html | 61 ++++++++++++++++++++++++++++++- 2 files changed, 119 insertions(+), 1 deletion(-) diff --git a/shared/base.css b/shared/base.css index 1e39065..fe4bf9e 100644 --- a/shared/base.css +++ b/shared/base.css @@ -669,3 +669,62 @@ body.help-open .app-header { .column-filter::placeholder { color: var(--text-muted); } + +/* ── Narrow-viewport behavior ───────────────────────────────────────────────── + ZDDC tools are desktop-first (engineering workstations, large monitors), + but a baseline narrow rule keeps them usable on a tablet in landscape or + a window split next to a document. Three principled moves: + + 1. Smaller header padding so the chrome doesn't dominate the viewport. + 2. The build-timestamp inside .header-title-group is hidden — it's a + traceability artifact, never an immediate-action element. (The full + label remains visible via the help panel and the "About" surface.) + 3. .header-right gap tightens; the action button next to the title + drops to a 32x32 icon-only square via the .btn-square pattern (tools + that haven't adopted .btn-square just keep the text button — graceful). + + Each tool is welcome to add its own narrow-mode rules in css/layout.css; + this block is the shared baseline. */ +@media (max-width: 800px) { + .app-header { + padding: 0.3rem 0.6rem; + } + .app-header__title { + font-size: 16px; + } + .header-left { + gap: 0.5rem; + } + .header-right { + gap: 0.25rem; + } + /* Hide the build-timestamp on narrow viewports — it's reference info, + not a primary affordance, and steals horizontal space from the title. + Still reachable via the help panel and DOM. */ + .header-title-group .build-timestamp { + display: none; + } + /* Action buttons that have an emoji-only or symbol-only label keep + their full width; text-labeled action buttons in the header shrink + to a more compact pad to fit. */ + .header-left > .btn { + padding: 0.3rem 0.6rem; + font-size: 0.85rem; + } +} + +/* Very narrow (phone-width). Stack the header-left children vertically so + the title and action button each get their own line; tools can override + this in their own CSS if they have a dedicated mobile layout. */ +@media (max-width: 480px) { + .app-header { + align-items: flex-start; + flex-direction: column; + gap: 0.4rem; + } + .header-left, + .header-right { + width: 100%; + justify-content: space-between; + } +} diff --git a/zddc/internal/handler/tables.html b/zddc/internal/handler/tables.html index 3758357..dad217b 100644 --- a/zddc/internal/handler/tables.html +++ b/zddc/internal/handler/tables.html @@ -709,6 +709,65 @@ body.help-open .app-header { color: var(--text-muted); } +/* ── Narrow-viewport behavior ───────────────────────────────────────────────── + ZDDC tools are desktop-first (engineering workstations, large monitors), + but a baseline narrow rule keeps them usable on a tablet in landscape or + a window split next to a document. Three principled moves: + + 1. Smaller header padding so the chrome doesn't dominate the viewport. + 2. The build-timestamp inside .header-title-group is hidden — it's a + traceability artifact, never an immediate-action element. (The full + label remains visible via the help panel and the "About" surface.) + 3. .header-right gap tightens; the action button next to the title + drops to a 32x32 icon-only square via the .btn-square pattern (tools + that haven't adopted .btn-square just keep the text button — graceful). + + Each tool is welcome to add its own narrow-mode rules in css/layout.css; + this block is the shared baseline. */ +@media (max-width: 800px) { + .app-header { + padding: 0.3rem 0.6rem; + } + .app-header__title { + font-size: 16px; + } + .header-left { + gap: 0.5rem; + } + .header-right { + gap: 0.25rem; + } + /* Hide the build-timestamp on narrow viewports — it's reference info, + not a primary affordance, and steals horizontal space from the title. + Still reachable via the help panel and DOM. */ + .header-title-group .build-timestamp { + display: none; + } + /* Action buttons that have an emoji-only or symbol-only label keep + their full width; text-labeled action buttons in the header shrink + to a more compact pad to fit. */ + .header-left > .btn { + padding: 0.3rem 0.6rem; + font-size: 0.85rem; + } +} + +/* Very narrow (phone-width). Stack the header-left children vertically so + the title and action button each get their own line; tools can override + this in their own CSS if they have a dedicated mobile layout. */ +@media (max-width: 480px) { + .app-header { + align-items: flex-start; + flex-direction: column; + gap: 0.4rem; + } + .header-left, + .header-right { + width: 100%; + justify-content: space-between; + } +} + /* shared/toast.css — single-toast notification styles paired with shared/toast.js. Uses BEM-ish .zddc-toast prefix to avoid collisions with tool-local .toast classes; the old classifier rules can stay @@ -1241,7 +1300,7 @@ body.help-open .app-header {
ZDDC Table - v0.0.17-alpha · 2026-05-11 01:10:25 · 6260aa4-dirty + v0.0.17-alpha · 2026-05-11 01:11:21 · 1f03631-dirty