/* ═══════════════════════════════════════════════════════════════════════════ * SPARTAN CRM — js/responsive.css * A-668 · Foldable phone / phone / tablet layout * ═══════════════════════════════════════════════════════════════════════════ * * MUST BE THE LAST STYLESHEET IN index.html. Read on before editing. * * WHY THIS FILE USES !important * ───────────────────────────── * Almost every layout style in this app is an inline `style="..."` emitted by a * JS renderer into a template string (≈10,000 of them across 206 modules — the * top file alone, 22a-jobs-detail-v2.js, has 946). An inline style beats every * selector, so a stylesheet that does not use !important cannot change a single * one of those layouts. Rewriting all of them into classes is a multi-month * refactor of code that is otherwise working; overriding them from the last * position in the cascade is one file. So: !important is the deliberate design * of this layer, not sloppiness. Every rule here is also fenced inside a * viewport-tier / pointer / segment condition, so on a desktop session this file * contributes nothing at all. * * HOW IT SELECTS * ────────────── * `html[data-vp="xs"]` etc., stamped by modules/_lib/viewport.js (and, before * the first paint, by the inline snippet in index.html's ). Tiers: * * xs < 480px Galaxy Z Fold COVER screen 344×882 · phones 412×915 * sm 480-639 large phones · phone landscape · Flip cover * md 640-899 Z Fold UNFOLDED 673×841 / 717×845 · iPad portrait 820×1180 * lg 900-1279 tablet landscape 1024×768 · small laptops * xl ≥ 1280 desktop * * plus `[data-vp-nav="drawer"]` (xs|sm|md — the sidebar is an overlay), * `[data-vp-h="short"]` (viewport under 560px TALL — the Fold cover screen in * landscape is 882×344), `[data-vp-fold="h"|"v"]` (a real hinge seam, from the * Viewport Segments media features), `[data-vp-ptr="coarse"]` and * `[data-vp-orient]`. * * The attribute is used in preference to a plain media query because the SAME * tier is read by the JS renderers (SpartanVP.tier() decides drawer-vs-docked * nav, chrome heights, column counts, sheet-vs-dialog modals). A media query and * a JS breakpoint that drift apart is precisely how you get a docked sidebar * overlapping a full-width page. One source of truth, two consumers. * * A few rules below DO use `@media` — only where the thing being styled has no * JS counterpart and the query is genuinely about the device (pointer, hover, * reduced motion, print). * * PERFORMANCE * ─────────── * CONTRACT-performance.md: a paint must stay under 120ms and the whole page is * rebuilt on every setState. Nothing here can affect that — CSS is applied by * the compositor, not by a renderer. The two things that COULD have hurt were * (a) re-rendering on every resize event and (b) renderers calling matchMedia * per row; both are solved in viewport.js (tier-change-only repaint, cached * reads). This file adds no JS. * * OPT-OUTS — for the handful of places where the generic rule is wrong: * .vp-cols-keep keep my grid-template-columns exactly as authored * .vp-nowrap-keep keep my white-space:nowrap * .vp-wide I am legitimately wider than the viewport; scroll me * .vp-desktop-only display:none below lg * .vp-narrow-only display:none at lg and above * ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * 1 · FOUNDATION — things that must be true at every size * ═══════════════════════════════════════════════════════════════════════════ */ /* The single most common cause of a horizontally-scrolling page on a phone is a * flex or grid CHILD refusing to shrink below its content's intrinsic width. * The default `min-width:auto` on a flex item means one long unbroken string — * a customer email address, a 30-character job reference, a Google Maps * attribution — makes its whole ancestor chain wider than the screen. Setting * min-width:0 on flex/grid children is the standard fix and is safe: it only * lets a box get SMALLER than its content, which is what `overflow` and * `text-overflow` are then there to handle. * * Scoped to #app so it can never touch a third-party widget's internals * (Google Maps' own panes, the Places Autocomplete shadow host), and applied at * every tier because a 1024px tablet overflows on a long email address too. */ #app :where(.card, .sp-card, .page-hero, .data-row, .kpi, .modal, .sp-modal, .panel) > * { min-width: 0; } /* NOT a blanket `#app * { min-width: 0 }`. That was the first attempt and it was * wrong: combined with the wrap rule below it let a 6-column grid squeeze every * column to ~40px, and the Deal Detail stage tracker rendered "AWAITING MEASURE" * as one character per line down the screen. A page that scrolls sideways is * bad; a page of vertical text is worse. So the floor is dropped only on the * containers whose children genuinely need to shrink — the ones that hold a long * unbroken string next to something else. */ html[data-vp="xs"] #app :where(.data-row, .page-hero, .tb, .modbar, .sb, .modal-header, .modal-footer) > *, html[data-vp="sm"] #app :where(.data-row, .page-hero, .tb, .modbar, .sb, .modal-header, .modal-footer) > *, html[data-vp="md"] #app :where(.data-row, .page-hero, .tb, .modbar, .sb, .modal-header, .modal-footer) > * { min-width: 0; } /* …with the exception of things whose whole job is to be a fixed size. */ /* …and these keep their intrinsic floor even inside those containers: a * notification count pill that can shrink below its own diameter stops being * round, and a 24px avatar that can shrink is just a smear. */ html[data-vp="xs"] #app :where(svg, img, .av, .sb-mark, .ico, .sp-dot, .brand-dot, .tb-dot, .bdg, .tag, .stage-bub, .map-pin-bub, .run-time, input[type="checkbox"], input[type="radio"]), html[data-vp="sm"] #app :where(svg, img, .av, .sb-mark, .ico, .sp-dot, .brand-dot, .tb-dot, .bdg, .tag, .stage-bub, .map-pin-bub, .run-time, input[type="checkbox"], input[type="radio"]), html[data-vp="md"] #app :where(svg, img, .av, .sb-mark, .ico, .sp-dot, .brand-dot, .tb-dot, .bdg, .tag, .stage-bub, .map-pin-bub, .run-time, input[type="checkbox"], input[type="radio"]) { min-width: auto; } /* Never let an image or embed push the page wide. */ #app img, #app video, #app canvas, #app iframe, #app embed, #app object { max-width: 100%; } /* Long unbroken strings — emails, URLs, reference numbers, base64 — wrap instead * of forcing a horizontal scroll. * * `break-word`, NOT `anywhere`, and the difference is the whole rule. Both break * a too-long word, but `anywhere` ALSO makes the element's min-content width one * character — so any flex or grid child inherits a min-content of a single glyph * and can be squeezed to a 12px column. That is exactly what happened on the * first pass: Deal Detail's six-stage tracker painted "AWAITING MEASURE" as one * letter per line, and a contact's name did the same. `break-word` leaves * min-content at the longest word, so a column can never collapse below a * readable width — it overflows its own box first, which the container rules * below then handle properly. */ html[data-vp="xs"] #app, html[data-vp="sm"] #app, html[data-vp="md"] #app { overflow-wrap: break-word; } /* Email addresses and URLs are the one place `anywhere` is right, and it is safe * HERE specifically because a link is not a layout container — nothing nests * inside it that could then be squeezed to one glyph, which is the trap that made * a blanket `anywhere` unusable (see the note above). A customer's email is often * the single widest token on a detail page: samuel.thompson@example.test measured * 212px, and `break-word` will not break it because it treats the whole address * as one word with no break opportunity it is willing to take. */ html[data-vp="xs"] #app :where(a[href^="mailto:"], a[href^="tel:"], a[href^="http"], .sp-email, .sp-url), html[data-vp="sm"] #app :where(a[href^="mailto:"], a[href^="tel:"], a[href^="http"], .sp-email, .sp-url), html[data-vp="md"] #app :where(a[href^="mailto:"], a[href^="tel:"], a[href^="http"], .sp-email, .sp-url) { overflow-wrap: anywhere; white-space: normal !important; min-width: 0; } /* iOS zooms the whole page when a font-size < 16px input is focused, then * leaves it zoomed — the classic "the app got bigger and I can't get it back" * bug. 16px on the input is the only reliable prevention. Only on touch, so * desktop keeps the compact 13px fields. */ @media (pointer: coarse) { #app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), #app select, #app textarea { font-size: 16px !important; } } /* A