From 406d82991b1839a8de51ae749c88047bbbf1c87a Mon Sep 17 00:00:00 2001 From: JB Date: Sat, 25 Jul 2026 13:19:24 -0400 Subject: [PATCH] feat(ui): scale interface for high resolution displays --- docs/DESIGN_SYSTEM.md | 18 ++++++++++++++++++ src/app.css | 4 ++++ 2 files changed, 22 insertions(+) diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md index 7cfb322..589e2f1 100644 --- a/docs/DESIGN_SYSTEM.md +++ b/docs/DESIGN_SYSTEM.md @@ -26,6 +26,24 @@ The canonical tokens live in `src/app.css` under `:root`. | Main text | `--shd-text` | `#ecebe5` | | Muted text | `--shd-text-muted` | `#858b8d` | | SHD action orange | `--shd-orange` | `#f6a821` | +| Adaptive display scale | `--shd-display-scale` | `1` by default; stepped on high-resolution desktops | + +### High-resolution display scaling + +The application uses restrained, stepped interface scaling when the effective +CSS viewport is substantially wider than a conventional desktop. At 2200px the +complete interface scales to 115%, at 2800px to 130%, and at 3400px to 150%. +This preserves the established relationship between typography, controls, +tables, spacing, hit targets, and fixed-position surfaces instead of enlarging +text alone. + +Use the shared `--shd-display-scale` token and the root-level `zoom` treatment; +do not add module-specific 4K font-size overrides. Responsive layouts below +2200px remain unchanged. Browser zoom and operating-system display scaling still +remain available to users and naturally change the effective CSS viewport. +High-resolution scaling must not introduce horizontal overflow, clipped fixed +surfaces, or a different semantic hierarchy. Test the standard desktop layout +and each affected wide breakpoint after changing this policy. | Success | `--shd-success` | `#75c08c` | | Destructive/error | `--shd-danger` | `#df8069` | | Informational/defensive | `--shd-info` | `#70b9d6` | diff --git a/src/app.css b/src/app.css index c899f76..8f0609f 100644 --- a/src/app.css +++ b/src/app.css @@ -24,9 +24,13 @@ --shd-gap-lg:20px; --shd-control-height:40px; --shd-header-height:76px; + --shd-display-scale:1; --shd-transition:transform .12s ease,filter .18s ease,opacity .18s ease,box-shadow .18s ease; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--shd-bg);color:var(--shd-text);font-family:Arial,Helvetica,sans-serif} button,input{font:inherit} a,a:hover,a:focus,a:focus-visible,a:active,a:visited{text-decoration:none} + @media(min-width:2200px){:root{--shd-display-scale:1.15}html{zoom:var(--shd-display-scale)}} + @media(min-width:2800px){:root{--shd-display-scale:1.3}} + @media(min-width:3400px){:root{--shd-display-scale:1.5}} body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px} header{height:76px;border-bottom:1px solid #292d2f;display:flex;align-items:center;padding:0 max(24px,5vw);position:relative;z-index:5;background:rgba(10,12,13,.93)} .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;letter-spacing:1.4px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:2px solid #f6a821;border-radius:50%;color:#f6a821}.accent{color:#f6a821}