is inline by default. So
every anchor rule above has been inert since this file shipped: measured at a
390px viewport, nav "Home" was still 16px tall and the footer links 21px, with
the 44px rule sitting right there applying to them. Giving them a box is what
makes the floor real. justify-content is NOT set here -- footer and nav links
are laid out by their own containers and centering them re-flows those rows. */
nav a,
.nav-links a,
.nav-right a,
footer a,
.footer-links a,
.footer-social a,
a.btn,
a[class*="btn-"],
a[class*="button"] {
display: inline-flex;
align-items: center;
}
/* Center whatever is inside a control we just grew, so short labels do not
end up pinned to the top-left of a newly taller box. Guarded to controls
that are already flex/inline-flex-free simple buttons. */
button,
.btn,
input[type="submit"],
input[type="button"] {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ── 3. DENSE TABLE EXEMPTION ────────────────────────────────────────────────
Dev Control, the boosting console and the park pool put up to four buttons in
one row. Height still comes up to 44px (that is the part that matters for a
thumb), but forcing 44px of WIDTH onto each would push the row past the
screen — and because body{overflow-x:hidden} is set on the dashboard, the
overflow would be silently CLIPPED rather than scrollable, which is worse
than a small button: the control would simply not exist. */
td button, th button,
td .btn, th .btn,
td a[class*="btn"], th a[class*="btn"] {
min-width: 0;
}
/* ── 4. TOUCH BEHAVIOUR ──────────────────────────────────────────────────────
touch-action:manipulation removes the legacy ~300ms double-tap-to-zoom delay,
so every button on the site starts responding instantly. */
button,
.btn,
a,
[role="button"],
label,
select,
summary {
touch-action: manipulation;
}
/* ── 5. WIDE TABLES SCROLL INSTEAD OF VANISHING ──────────────────────────────
Several tables carry min-width up to 760px. Where the page wrapped them in a
scroller they already work; where it did not, the content was being clipped
by overflow-x:hidden on the body. Making the table element itself scrollable
is the one fix that works without touching thirty files' markup. */
.table-wrap,
.wt-scroll,
.table-responsive {
-webkit-overflow-scrolling: touch;
}
/* ── 6. SAFE AREA ────────────────────────────────────────────────────────────
Anything pinned to the bottom of the screen otherwise sits under the iPhone
home indicator and is hard to hit. */
.toast-container,
#toast-container {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* ── 7. NO ACCIDENTAL TEXT SELECTION ON CONTROLS ─────────────────────────────
Long-pressing a button to try to tap it should not pop the text-selection
magnifier over the top of the thing you are aiming at. */
button,
.btn,
[role="button"],
.sidebar-item,
.tab,
[class*="chip"] {
-webkit-user-select: none;
user-select: none;
}
/* ── 8. CONTROLS THAT STYLE THEMSELVES SHORTER ───────────────────────────────
Page CSS wins on specificity, so a control given an explicit height by class or
id ignored §2 entirely. These are the shapes found by measurement: logo links,
the theme switch, card footer CTAs and tab strips. Prose links inside are
NOT here on purpose. */
a.nav-logo,
.theme-track,
a.start,
.modes a,
.ag-foot a {
min-height: 44px !important;
display: inline-flex;
align-items: center;
}
/* ── 9. THE LAST FEW, BY MEASUREMENT ─────────────────────────────────────────
Found by walking every page at 390px and reading back the computed box, not by
guessing at class names:
.login-foot a 16px inline (nav link, not prose)
a.back-link 22px inline-flex
.mobile-overlay a 28px block (the mobile menu itself -- the one place a
short target is least forgivable)
Links sitting inside
/
prose are still deliberately untouched. */
.login-foot a,
.back-link,
.mobile-overlay a,
.loading a {
min-height: 44px !important;
display: inline-flex;
align-items: center;
}
/* The mobile menu's rows should fill the sheet, not hug their text. */
.mobile-overlay a {
display: flex;
width: 100%;
}
/* ── 10. DECORATIVE PSEUDO-ELEMENTS MUST NOT SCROLL THE PAGE ─────────────────
/freepb's carries a ::before glow that is 507px wide and
absolutely positioned; at a 390px viewport its right edge lands at 445px and
the whole document scrolls sideways by 55px.
This is the one defect a DOM audit CANNOT find: a pseudo-element has no node, so
querySelectorAll('*') never sees it and every "which element is too wide" check
comes back empty while the page is visibly broken. It was located by hiding
subtrees until the overflow vanished.
clip, not hidden: overflow:hidden creates a scroll container and breaks
position:sticky inside it. hidden is listed first only as a fallback for engines
without `clip`. */
main.page,
.page > .hero,
[class*="glow"] {
overflow-x: hidden;
overflow-x: clip;
}
}