/* =============================================================================
Mobile overrides. Scoped under `html.mobile-device` (added to by a
clientside callback that inspects navigator.userAgent). Desktop browsers
never match and are untouched.
Architecture (see app.py "Mobile-first" comment):
- The STATIC viewport is `width=device-width`, so every page reflows to the
real phone width in portrait. CRITICAL: if ANY element is wider than the
screen, the browser expands the layout viewport to fit it and zooms the
whole page out (defeating mobile-first). So the global rules below cap
widths and make the navbar fit.
- The ONE exception is `/prediction` (html.route-prediction), which keeps a
1280px viewport for Plotly drawline. The 1280-scaling compensations
(bigger chart fonts, immersive landscape chrome) are scoped to that route.
========================================================================== */
/* --- Global: never let content force the viewport wider than the screen ----
A single overflowing element zooms the whole page out, so we defend against
it broadly. Individual wide widgets (tables, iframes, charts) also get
max-width:100% in their page-specific rules. */
html.mobile-device:not(.route-prediction),
html.mobile-device:not(.route-prediction) body {
/* lang.css pins `html, body { min-width: 1280px }` as a fallback for the old
forced-desktop strategy. That single rule anchors the whole page to 1280
and defeats device-width. Release it on the mobile-first pages (kept on
/prediction, which still wants the wide layout). */
min-width: 0 !important;
overflow-x: hidden;
max-width: 100vw;
}
html.mobile-device:not(.route-prediction) img,
html.mobile-device:not(.route-prediction) iframe,
html.mobile-device:not(.route-prediction) table,
html.mobile-device:not(.route-prediction) .dash-table-container {
max-width: 100% !important;
}
/* Form controls: the classic chriddyp Dash CSS gives a wide default,
and dcc.Input wraps it in an inline-block `.dash-input-container` that sizes
to that wide content -- inflating every ancestor and overflowing the phone.
Force the whole subtree to block layout capped at the viewport width. */
html.mobile-device:not(.route-prediction) #page-content,
html.mobile-device:not(.route-prediction) #page-content * {
max-width: 100% !important;
box-sizing: border-box !important;
}
html.mobile-device .dash-input-container,
html.mobile-device .dash-input,
html.mobile-device .dash-input-element,
html.mobile-device input:not([type="checkbox"]):not([type="radio"]),
html.mobile-device textarea,
html.mobile-device select,
html.mobile-device .dash-dropdown,
html.mobile-device .Select,
html.mobile-device .Select-control {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Consent / option checkboxes (dbc.Checklist) render a real
next to its label. The generic input rule above
used to stretch them to display:block; width:100%, which pushed the label to
the next line and rendered the box as a full-width empty rectangle. Keep
them as small inline boxes sitting beside their (wrapping) label text. */
html.mobile-device .form-check,
html.mobile-device .dash-checklist .form-check,
html.mobile-device label.form-check-label {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
width: 100% !important;
}
html.mobile-device input[type="checkbox"],
html.mobile-device input[type="radio"] {
display: inline-block !important;
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
margin: 3px 0 0 0 !important;
flex: 0 0 auto !important;
}
html.mobile-device .form-check-label {
display: inline !important;
width: auto !important;
}
/* dcc.Input applies the Python `style=` to the WRAPPER (.dash-input-container),
leaving the real with the tiny chriddyp default --
which renders as an inset double-box. Flatten the wrapper and style the
actual input so it's a single full-width, finger-friendly field. */
html.mobile-device .dash-input-container {
padding: 0 !important;
border: none !important;
background: none !important;
}
html.mobile-device input.dash-input-element {
padding: 12px 14px !important;
font-size: 17px !important;
height: auto !important;
min-height: 48px !important;
border: 1px solid #ccc !important;
border-radius: 6px !important;
}
/* --- Mobile navbar (MobileNavBar: burger + title + language flag) ----------
The desktop `massive tabular menu` is ~1280px wide and would expand the
viewport; on mobile we render the compact MobileNavBar instead. This bar is
intrinsically narrow so it never widens the layout viewport. */
html.mobile-device .mobile-navbar {
width: 100%;
box-sizing: border-box;
}
html.mobile-device .mobile-nav-bar {
display: flex;
align-items: center;
gap: 10px;
background: #2185d0; /* Fomantic blue, matches desktop navbar */
color: #fff;
padding: 8px 12px;
box-sizing: border-box;
}
html.mobile-device .mobile-nav-burger {
flex: 0 0 auto;
width: 48px;
height: 48px;
font-size: 26px;
line-height: 1;
color: #fff;
background: transparent;
border: 0;
border-radius: 8px;
cursor: pointer;
}
html.mobile-device .mobile-nav-burger:active {
background: rgba(255, 255, 255, 0.18);
}
html.mobile-device .mobile-nav-title {
flex: 1 1 auto;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html.mobile-device .mobile-nav-lang {
flex: 0 0 auto;
}
/* The language dropdown reused from desktop: keep it compact and white-on-blue. */
html.mobile-device .mobile-nav-lang .lang-dropdown {
color: #fff !important;
font-size: 15px;
padding: 6px 4px !important;
}
html.mobile-device .mobile-nav-lang .lang-flag {
height: 18px !important;
}
/* Open the hover menu to the LEFT so it doesn't overflow the right edge. */
html.mobile-device .mobile-nav-lang .lang-dropdown > .menu {
left: auto !important;
right: 0 !important;
}
/* Drawer: full-width stacked links, toggled by the burger. */
html.mobile-device .mobile-nav-drawer {
background: #1a6fb0;
width: 100%;
box-sizing: border-box;
}
html.mobile-device .mobile-nav-drawer .mobile-nav-link {
display: block;
padding: 16px 18px;
color: #fff;
font-size: 18px;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
html.mobile-device .mobile-nav-drawer .mobile-nav-link.active {
background: rgba(255, 255, 255, 0.16);
font-weight: 700;
}
html.mobile-device .mobile-nav-drawer .mobile-nav-link:active {
background: rgba(255, 255, 255, 0.24);
}
/* --- Buttons: finger-friendly tap targets (Apple HIG / Material: >=44px) --- */
html.mobile-device .ui.button,
html.mobile-device button.ui {
min-height: 52px !important;
font-size: 17px !important;
}
/* The desktop validation callback rewrites #landing-continue's inline width to
220px; force it full-width on mobile. */
html.mobile-device #landing-continue,
html.mobile-device .landing-continue-mobile {
width: 100% !important;
}
/* --- Startup wizard inputs: never clip the field box ----------------------
The flattened dcc.Input wrapper could collapse shorter than the 48px input,
clipping its bottom border, and the 6px gap made adjacent boxes look
bottomless. Force the wrapper to grow with the input and give each field
breathing room. */
html.mobile-device #startup-page .dash-input-container {
overflow: visible !important;
height: auto !important;
margin-bottom: 16px !important;
}
html.mobile-device #startup-page input.dash-input-element {
margin-bottom: 0 !important;
}
html.mobile-device #startup-page .dash-dropdown,
html.mobile-device #startup-page .Select {
margin-bottom: 16px !important;
}
/* Number fields (age, CGM/diabetes duration): Dash renders its own
`.dash-input-stepper` -/+ buttons inside the input wrapper. Once the input
is forced full-width (display:block) on mobile, those steppers wrap to a
second line and render as stray "-"/"+" controls below the field. They add
nothing on a touch keypad, so hide them (and the native webkit spinner). */
html.mobile-device .dash-input-stepper {
display: none !important;
}
html.mobile-device input[type="number"] {
-moz-appearance: textfield !important;
appearance: textfield !important;
}
html.mobile-device input[type="number"]::-webkit-outer-spin-button,
html.mobile-device input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* --- Info pages (about / faq / contact / demo) ---------------------------- */
html.mobile-device .info-page {
padding: 16px clamp(12px, 4vw, 24px) 32px !important;
}
/* Contact tables: on a phone the 2-3 column tables squeeze the link/email cell
so narrow that long URLs/emails wrap with ugly 1-2 char danglers ("...rostock."
/ "de"). Collapse each table to a single stacked column so every value gets
the full viewport width (most links then fit on one line), and use a slightly
narrower link font that breaks cleanly when a token is still too long. */
html.mobile-device .info-page .contact-table thead {
display: none !important;
}
html.mobile-device .info-page .contact-table,
html.mobile-device .info-page .contact-table tbody,
html.mobile-device .info-page .contact-table tr,
html.mobile-device .info-page .contact-table td {
display: block !important;
width: 100% !important;
}
html.mobile-device .info-page .contact-table tr {
padding: 8px 0 !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
}
html.mobile-device .info-page .contact-table td {
padding: 1px 0 !important;
border-bottom: none !important;
}
/* First cell of each row (the name / platform) reads as the row's heading. */
html.mobile-device .info-page .contact-table td:first-child {
font-weight: 700 !important;
color: #0f172a !important;
}
html.mobile-device .info-page .contact-table a {
font-size: 14px !important;
letter-spacing: -0.01em !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
/* --- Consent form page (/consent-form): full-bleed TOS-style reader --------
The standalone consent page used to nest the scrolling text inside a bordered
card with margins, wasting space and showing a box-in-a-box. On mobile make
it one full-width scrollable panel that fills the screen, with the back
button anchored below it (the iframe owns the only scrollbar). */
html.mobile-device #consent-form-page .consent-form-shell {
padding: 12px !important;
}
html.mobile-device #consent-form-page .consent-form-text {
border-radius: 10px !important;
}
/* ===========================================================================
/prediction ONLY (html.route-prediction): 1280px viewport, scaled down.
These compensate for the scale-down and build the immersive chart.
=========================================================================== */
/* Chart tick / axis labels: 12px default reads ~8px after scaling. */
html.route-prediction.mobile-device .js-plotly-plot .xtick text,
html.route-prediction.mobile-device .js-plotly-plot .ytick text,
html.route-prediction.mobile-device .js-plotly-plot .legendtext {
font-size: 16px !important;
}
html.route-prediction.mobile-device .js-plotly-plot .xtitle,
html.route-prediction.mobile-device .js-plotly-plot .ytitle {
font-size: 18px !important;
}
html.route-prediction.mobile-device .js-plotly-plot .gtitle {
font-size: 20px !important;
}
/* Blanket text bump (only meaningful on the scaled 1280 chart page). */
html.route-prediction.mobile-device body :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.js-plotly-plot *) {
font-size: 18px !important;
}
/* Tighten outer padding so the chart gets vertical room. */
html.route-prediction.mobile-device #page-content > div {
padding-top: 8px !important;
padding-bottom: 8px !important;
gap: 10px !important;
}
html.route-prediction.mobile-device #prediction-glucose-chart-container {
min-height: 380px;
}
html.route-prediction.mobile-device #submit-button {
min-height: 64px !important;
font-size: 22px !important;
}
/* Immersive landscape: collapse all chrome (navbar, the instructional header,
round indicator) so the chart fills the screen. Native Plotly only -- never
CSS-rotate (breaks drawline touch mapping). */
@media (orientation: landscape) and (pointer: coarse) and (max-device-width: 1024px) {
html.route-prediction.mobile-device #navbar-container,
html.route-prediction.mobile-device .prediction-header,
html.route-prediction.mobile-device #round-indicator {
display: none !important;
}
/* Pin the page to exactly one viewport and let the chart flex-fill whatever
height is left after the (compact) units row and the submit button. The
old fixed `min-height: 82vh` on the chart, stacked under the units row and
above submit, overflowed past 100vh and cropped the x-axis + submit off the
bottom of the screen. */
html.route-prediction.mobile-device #page-content > div {
height: 100vh !important;
overflow: hidden !important;
padding: 4px 6px !important;
gap: 4px !important;
}
html.route-prediction.mobile-device #prediction-units-row {
position: absolute !important;
left: 6px !important;
bottom: 4px !important;
z-index: 2 !important;
height: 46px !important;
margin-bottom: 0 !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 10px !important;
padding: 0 8px !important;
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 6px !important;
white-space: nowrap !important;
}
html.route-prediction.mobile-device #prediction-chart-meta {
max-width: 250px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-right: 8px !important;
}
html.route-prediction.mobile-device #glucose-unit-selector {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
html.route-prediction.mobile-device #glucose-unit-selector .form-check {
display: flex !important;
align-items: center !important;
margin: 0 !important;
min-height: 0 !important;
}
/* chart + action row wrapper becomes a column that owns the remaining height */
html.route-prediction.mobile-device #prediction-chart-submit-wrap {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
gap: 4px !important;
}
html.route-prediction.mobile-device #prediction-glucose-chart-container {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
}
html.route-prediction.mobile-device #prediction-actions {
flex: 0 0 46px !important;
display: flex !important;
flex-direction: row !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
padding-left: 330px !important;
}
html.route-prediction.mobile-device #prediction-progress-label {
display: none !important;
}
html.route-prediction.mobile-device #submit-button,
html.route-prediction.mobile-device #finish-study-button {
flex: 0 0 auto !important;
width: 220px !important;
height: 46px !important;
min-height: 46px !important;
font-size: 18px !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 8px 12px !important;
}
}