<- siblings OUTSIDE the shell
WHY a shell and not document/body scroll: body scroll is unreliable on real phones here because
the body carries overscroll-behavior-y:none + safe-area padding, #app/.online-shell are pinned to
min-height:100dvh, and a position:fixed Logout button overlays everything. Under those conditions
iOS intermittently refuses to treat the body as the one-finger scroll target. A shell gives the
scroller a DEFINITE height (flex:1 + min-height:0) and owns the gesture (touch-action:pan-x pan-y +
-webkit-overflow-scrolling:touch), so one finger always scrolls.
RULES (enforced by MobileLayoutSourceTests):
* Never put touch-action:none on a page-level container.
* Never preventDefault() a one-finger touch (see map-pinch.js: two-finger only).
* Never cap the inner scroller with max-height:calc(100dvh - ) — the header wraps.
* Never combine height:100dvh + overflow:hidden on a parent UNLESS its child is a verified scroller
(min-height:0 + overflow:auto), which is exactly what .mobile-scroll-shell/.map-shell provide.
PAGE -> STRATEGY MAP:
Raport zilnic / Daily log / Day close / Live map -> .map-shell + .umbrella-scroll
Map editor (Editare hartă) -> .map-editor-shell + .map-editor-content
Clienți / Selectare plaje / Plaja nouă/ Client nou / Coș plaje / Activitate critică
-> .mobile-scroll-shell + .mobile-scroll-content
Utilizatori -> .client-users-shell + .client-users-mobile-pager
Login / Start -> .online-center (short, centred, no scroll)
The .mobile-scroll-shell / .map-* shells reproduce the EXACT mechanics of the live-map shell, the
layout proven to scroll with one finger on real phones. Do NOT diverge (no height:auto, no
touch-action:pan-y-only, no overflow-x:hidden on the scroller) — that broke finger scroll before.
============================================================================================ */
/* These shells reproduce the EXACT mechanics of the live-map shell (.map-shell + .umbrella-scroll),
which is the layout that scrolls reliably with one finger on real phones (Raport zilnic uses it).
The previous version diverged (height:auto, flex:1 1 auto, overflow-x:hidden, touch-action:pan-y)
and broke finger scroll on some devices. Do NOT add height:auto here: position:fixed + inset:0
already gives the shell a definite viewport height, which the flex child needs to bound its
scroll box. */
.mobile-scroll-shell,
.map-editor-shell {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
background: #f3f8f8;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
/* Bind the shell to the DYNAMIC (visible) viewport, not the layout viewport. With only
position:fixed; inset:0 the shell is as tall as the LARGE viewport (URL bar retracted); on Android
Chrome the inner .mobile-scroll-content then reports clientHeight == large viewport, so a user list
shorter than that has NOTHING to scroll with one finger — while its bottom sits behind the URL/nav
bar. A two-finger drag pans the visual viewport over the layout viewport at the compositor level
(bypassing the inner scroller), which is precisely why two fingers scrolled and one finger did not.
height:100dvh tracks the VISIBLE area, so the scroller always overflows the visible box and one
finger scrolls. bottom:auto lets height drive the box instead of the layout-viewport bottom edge.
.map-editor-shell already gets this via its own height:100dvh rule. (100vh is the dvh fallback.) */
.mobile-scroll-shell {
bottom: auto;
height: 100vh;
height: 100dvh;
}
.mobile-scroll-shell > .online-topbar,
.map-editor-shell > .map-editor-header {
flex: none;
}
.mobile-scroll-content,
.map-editor-content {
flex: 1; /* basis 0 — fills the shell regardless of content height */
min-height: 0; /* lets the scroll box shrink below content (enables scroll) */
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-x pan-y; /* one finger pans/scrolls; never block vertical drag */
box-sizing: border-box;
padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.admin-clients-page,
.beach-new-page {
padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}
.admin-clients-page .admin-list {
padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.beach-new-page .form-card {
margin-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
/* Beach creation preview must not become a vertical scroll trap on phones. It may pan sideways,
but the page owns vertical movement so the Create button is reachable with one finger. */
.beach-new-page .beach-preview-scroll {
max-height: none;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: auto;
touch-action: pan-x pan-y;
}
/* Editor map: horizontal pan and two-finger pinch live inside the map; vertical movement with one
finger belongs to the page scroll area above, so the lower edit panel remains reachable. */
.map-editor-scroll {
display: block;
max-height: none;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
overscroll-behavior-y: auto;
/* pan-x pan-y (NOT pinch-zoom): with the pinch-zoom token the browser claims the two-finger
gesture for native page zoom — which the viewport meta disables — so the JS pinch helper never
received a cancelable touchmove and editor zoom didn't work. Dropping it (matching the live
map's .umbrella-scroll) lets sezlongMapPinch handle two-finger zoom while one finger still
pans horizontally and bubbles vertical scroll up to .map-editor-content. */
touch-action: pan-x pan-y;
border-radius: .8rem;
background: #e9dcc1;
}
.map-editor-grid {
transform-origin: top left;
}
.map-editor-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: .65rem;
flex-wrap: wrap;
margin: .55rem 0 .65rem;
}
.map-editor-touch-hint {
font-size: .78rem;
}
.cell-toggle {
width: 38px;
height: 24px;
border: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
overflow: visible;
}
.cell-toggle .toggle-track {
position: relative;
width: 34px;
height: 20px;
border-radius: 999px;
border: 2px solid #0c6b7d;
background: #0c6b7d;
box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.cell-toggle .toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
transition: transform .15s ease;
}
.cell-toggle.is-off .toggle-track {
border-color: #8f9b9f;
background: #f7f9fa;
}
.cell-toggle.is-off .toggle-knob {
background: #8f9b9f;
}
.cell-toggle.is-on .toggle-knob {
transform: translateX(14px);
}
@media (max-width: 560px) {
.mobile-scroll-content,
.map-editor-content {
padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}
.admin-clients-page,
.beach-new-page,
.map-editor-content {
padding-left: .75rem;
padding-right: .75rem;
}
.map-editor-actions > button,
.map-cell-actions > button,
.beach-new-page .btn-primary {
width: 100%;
}
.map-editor-tools {
align-items: flex-start;
flex-direction: column;
}
}
/* Keep the fixed global Logout clear of the editor header as well. */
.online-shell.session-active .map-editor-header {
padding-right: calc(7rem + env(safe-area-inset-right, 0px)) !important;
}
@media (max-width: 520px) {
.online-shell.session-active .map-editor-header {
padding-right: calc(3.65rem + env(safe-area-inset-right, 0px)) !important;
}
}
/* ============================================================================================
CARD-LIST TOUCH CONTRACT (Clienți / Selectare plaje / Coș plaje / Activitate critică)
--------------------------------------------------------------------------------------------
One-finger vertical scroll must START even when the finger lands ON a card body, on static card
text, or on a full-width action button — not only on the page margin.
Bug it fixes: with the default touch-action:auto the browser holds the first touchmove on a