VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(responsive): shared narrow-viewport baseline for the header chrome

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
ZDDC 2026-05-10 20:12:17 -05:00
parent 1f03631d2d
commit 6d72f5c770
2 changed files with 119 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
shared/base.css
View file

@ -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;
}
}

61
zddc/internal/handler/tables.html
View file

@ -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 {
</svg>
<div class="header-title-group">
<span class="app-header__title" id="table-title">ZDDC Table</span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-alpha · 2026-05-11 01:10:25 · 6260aa4-dirty</span></span>
<span class="build-timestamp"><span style="color:red;font-weight:bold">v0.0.17-alpha · 2026-05-11 01:11:21 · 1f03631-dirty</span></span>
</div>
</div>
<div class="header-right">