From 83271ee69e089b03e6c2bad14d8b6d528d694efb Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Sat, 18 Apr 2026 19:49:35 -0400 Subject: [PATCH] fix(shopfloor): pages own the scroll + sharp corner fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two problems after the previous round: 1) Mobile scroll still not working, even on a real phone. Dug into /usr/lib/python3/dist-packages/odoo/addons/web/static/src/ webclient/webclient_layout.scss and found Odoo's mobile layout switches scroll ownership at @media-breakpoint-down(md) (<768px): Desktop: .o_content has overflow:auto — your content scrolls there Mobile: .o_action gets overflow:auto, .o_content is overflow:initial Our client action roots had `min-height: 100%` and relied on an ancestor for scroll. That ancestor changes between breakpoints, and somewhere in the transition scroll gets lost — the page fills but can't scroll. Fix: make each page OWN its scroll, like .o_content on desktop kanban/list views. Three roots now have: .o_fp_tablet / .o_fp_manager / .o_fp_plant_overview { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } Scroll works regardless of which ancestor Odoo decides owns it at any given breakpoint. 2) Sharp corner on column header at mobile widths. The previous commit set `overflow: visible` on .o_fp_po_column at <=900px trying to help scroll. But the column has border-radius: 20px and contains .o_fp_po_col_header (which has its own background). When overflow is visible, the header bg extends to the column's corners without being clipped — you see squared corners on the mobile card. Fix: keep `overflow: hidden` on .o_fp_po_column at every breakpoint (that's what clips the rounded corners). Only lift `max-height` on mobile so columns size to content naturally. Since the PAGE now owns the scroll (see fix #1), the column doesn't need internal scroll — no `overflow: auto` on the body is needed either. Verified in compiled CSS at /web/assets/7ff5b28/web.assets_backend.min.css: .o_fp_tablet { height: 100%; overflow-y: auto; ... } .o_fp_manager { height: 100%; overflow-y: auto; ... } .o_fp_plant_overview { height: 100%; overflow-y: auto; ... } .o_fp_po_column { border-radius: 20px; overflow: hidden } @media (max-width: 900px) .o_fp_po_column { flex: 1 1 auto; min-width: 100%; max-width: 100%; max-height: none; // no overflow override — hidden stays } Version bumped 19.0.6.0.0 -> 19.0.7.0.0 to force bundle hash change. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../fusion_plating_shopfloor/__manifest__.py | 2 +- .../src/scss/fusion_plating_shopfloor.scss | 11 ++++++++--- .../static/src/scss/manager_dashboard.scss | 6 ++++-- .../static/src/scss/plant_overview.scss | 16 ++++++++++------ 4 files changed, 23 insertions(+), 12 deletions(-) diff --git a/fusion_plating/fusion_plating_shopfloor/__manifest__.py b/fusion_plating/fusion_plating_shopfloor/__manifest__.py index cbb71780..fe9d6bd5 100644 --- a/fusion_plating/fusion_plating_shopfloor/__manifest__.py +++ b/fusion_plating/fusion_plating_shopfloor/__manifest__.py @@ -5,7 +5,7 @@ { 'name': 'Fusion Plating — Shop Floor', - 'version': '19.0.6.0.0', + 'version': '19.0.7.0.0', 'category': 'Manufacturing/Plating', 'summary': 'Shop-floor tablet stations, QR scanning, bake window enforcer, ' 'first-piece inspection gates.', diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/fusion_plating_shopfloor.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/fusion_plating_shopfloor.scss index 3d2545de..8c4fac2e 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/fusion_plating_shopfloor.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/fusion_plating_shopfloor.scss @@ -23,13 +23,18 @@ font-family: $fp-font-stack; background-color: $fp-page; color: $fp-ink; - min-height: 100%; + // Own the scroll: fill parent, scroll internally. This is the pattern + // every scrolling Odoo view uses (.o_content in list/kanban). Relying + // on the parent .o_action to scroll breaks on mobile because Odoo + // switches its layout around @media-breakpoint-down(md) and the + // scroll gets lost somewhere up the tree. + height: 100%; + overflow-y: auto; + -webkit-overflow-scrolling: touch; padding: $fp-space-6 $fp-space-7; display: flex; flex-direction: column; gap: $fp-space-6; - // Smooth momentum scroll on iOS / iPadOS Safari - -webkit-overflow-scrolling: touch; @media (max-width: 900px) { padding: $fp-space-4; gap: $fp-space-4; } @media (max-width: 600px) { padding: $fp-space-3; gap: $fp-space-4; } diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss index 41fc0f79..c4771705 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/manager_dashboard.scss @@ -21,12 +21,14 @@ font-family: $fp-font-stack; background-color: $fp-page; color: $fp-ink; - min-height: 100%; + // Own the scroll (see note in fusion_plating_shopfloor.scss). + height: 100%; + overflow-y: auto; + -webkit-overflow-scrolling: touch; padding: $fp-space-6 $fp-space-7; display: flex; flex-direction: column; gap: $fp-space-6; - -webkit-overflow-scrolling: touch; @media (max-width: 900px) { padding: $fp-space-4; gap: $fp-space-4; } @media (max-width: 600px) { padding: $fp-space-3; gap: $fp-space-4; } diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_overview.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_overview.scss index 309ee52c..fda89f50 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_overview.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_overview.scss @@ -20,10 +20,12 @@ font-family: $fp-font-stack; background-color: $fp-page; color: $fp-ink; - min-height: 100%; + // Own the scroll (see fusion_plating_shopfloor.scss for rationale) + height: 100%; + overflow-y: auto; + -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; - -webkit-overflow-scrolling: touch; } @@ -145,17 +147,19 @@ border-radius: $fp-radius-lg; box-shadow: $fp-elev-1; max-height: calc(100vh - 180px); + // Keep overflow: hidden at ALL sizes — it's what clips the rounded + // corners cleanly. On mobile we just lift the max-height so the + // column sizes to content and doesn't need internal scroll. overflow: hidden; - // Touch / mobile: let columns be their natural height and let the - // PAGE scroll instead of each column having its own internal - // scroll. Nested scroll containers are unusable on a phone. @media (max-width: 900px) { flex: 1 1 auto; min-width: 100%; max-width: 100%; max-height: none; - overflow: visible; + // overflow: hidden stays — corners stay rounded. Since the + // content body no longer has overflow-y: auto on mobile (see + // below), nothing is clipped and the parent page scrolls. } }