/* * Site-wide responsive pass for tablet-width screens (~768px-1024px). * Linked from the of every rendered page (see bootstrap injection). * This is a global override layer for old fixed-width/fixed-height legacy * markup, not a per-page redesign — it can't perfectly reflow every * hand-built table layout, but it removes the worst breakage: content * clipped by JS-forced pixel heights, inputs/tables wider than the screen, * and desktop-only fixed-width shells. */ *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; } /* Form controls: legacy markup hard-codes pixel widths (size="60" etc.) that overflow a tablet viewport. Cap them without changing desktop. */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], input[type="search"], select, textarea { max-width: 100%; } @media (max-width: 1024px) { html { -webkit-text-size-adjust: 100%; } body { overflow-x: auto; } /* The most common legacy page shell (copy-pasted across ~76 pages) pins itself to the window's pixel height via inline JS (htresize(): it sets style.height on these exact IDs on load/resize using window.innerHeight minus hardcoded offsets). That math assumes a desktop window, so on a narrower/shorter tablet viewport it clips content. Forcing these back to fluid layout needs !important — the JS sets a plain inline style, which a stylesheet's !important legitimately overrides. */ #maintable, #headertable, #subbody, #trh1, #trh2, #trh3, #trh4 { height: auto !important; width: 100% !important; max-width: 100%; overflow-x: auto; } #maintable { overflow: visible; } /* Legacy pages frequently hard-code table width="800", width="887" etc. via the HTML attribute. A CSS width declaration beats the presentational HTML attribute, so this reliably caps them without editing any markup. */ table { max-width: 100%; } /* Common modern-page pattern (e.g. cv_pool.php's .form-row) — collapse a two-column form grid to one column once it can't fit comfortably. */ .form-row:not(.full-width) { grid-template-columns: 1fr !important; } }