/*
* Global mobile / Capacitor (Android + iOS WebView) layout hardening.
* Referenced from index.html as .
* Tailwind is loaded from the CDN, so these are plain-CSS complements that
* cover things utility classes cannot express per-element.
*/
/* ---------------------------------------------------------------
1. Viewport + horizontal-overflow guard
Wide desks (billing tables, receipt previews) must scroll inside
their own container, never push the page sideways.
--------------------------------------------------------------- */
html,
body {
width: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/*
* `clip`, not `hidden`, and on only.
*
* `overflow-x: hidden` forces the used value of `overflow-y` from `visible` to
* `auto`, turning the element into a scroll container. On both and
* that made two nested scrollers: the mouse wheel targeted 's
* scrollport, which has no overflow of its own, while the real overflow sat on
* the viewport scroller — so tall pages (the signup form) could only be
* scrolled by dragging the scrollbar.
*
* `clip` prevents sideways overflow without creating a scroll container.
*/
body {
overflow-x: clip;
}
body {
/* Android edge-to-edge: keep content clear of the gesture/nav bar. */
overscroll-behavior-y: none;
}
#root {
min-height: 100dvh;
}
/* ---------------------------------------------------------------
2. Momentum scrolling inside every scroll container
Without this, nested overflow panes feel dead in the Android WebView.
--------------------------------------------------------------- */
.overflow-auto,
.overflow-x-auto,
.overflow-y-auto,
.overflow-scroll {
-webkit-overflow-scrolling: touch;
}
/* Horizontal tab strips / table scrollers: hide the scrollbar chrome but
keep the scrolling, and snap the gesture to the axis. */
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.overflow-x-auto {
overscroll-behavior-x: contain;
}
/* ---------------------------------------------------------------
3. Android safe-area for fixed/full-screen surfaces
Modals opened as full-bleed sheets on phones set their own
pt/pb via env(); this covers fixed action bars that do not.
--------------------------------------------------------------- */
.safe-top {
padding-top: env(safe-area-inset-top);
}
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
.safe-x {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* ---------------------------------------------------------------
4. Touch targets + input behaviour on small screens
--------------------------------------------------------------- */
@media (max-width: 767px) {
/* Kill the 300ms tap delay / double-tap zoom on controls. Deliberately
no font-size override here: the compact desks rely on their type scale,
and the Android WebView does not focus-zoom the way iOS Safari does. */
button,
[role='button'],
a[href],
label {
touch-action: manipulation;
}
}
/* Remove the grey tap flash on Android Chrome/WebView. */
* {
-webkit-tap-highlight-color: transparent;
}
/* ---------------------------------------------------------------
5. Print: never let the mobile scroll containers clip a receipt.
--------------------------------------------------------------- */
@media print {
html,
body {
overflow: visible !important;
}
/*
* DO NOT un-clip scroll containers here.
*
* The app shell is `h-screen overflow-hidden` and is `overflow-y-auto`.
* Forcing those to `overflow: visible` in print lets the whole scrollable page
* contribute its full height to the printed document. Everything is
* visibility:hidden so it is invisible, but it still occupies space — which
* produced several blank sheets before the actual document, and pushed the
* document itself onto page 2.
*
* The printable documents position themselves absolutely against the page, and
* the pharmacy/OTC receipts print from their own popup window, so neither needs
* this reset.
*/
.overflow-x-auto > table {
width: 100% !important;
min-width: 0 !important;
}
}