From 5d5964a327c4b41ddd592ac1e84ba9d95cfeac3a Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Sun, 24 May 2026 20:40:41 -0400 Subject: [PATCH] fix(plant-kanban): full-height bordered columns + viewport-pinned scrollbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two layout polish fixes after persona-walk feedback on the new Plant Kanban surface (`fp_plant_kanban`). 1. Columns now run full board height with visible borders Was: `.col` had `background: $plant-bg` (= page bg, invisible) and no border, so only the header card (`.o_fp_col_header`) drew any outline. Empty columns (BAKING / DE-RACKING / SHIPPING) looked unbounded — operators couldn't tell where one column ended and another began. Now: `.col` is the bordered white card (Trello / Asana style), stretches full height via grid + flex. `.o_fp_col_header` drops its standalone border / radius / background and is just a bottom- divider band inside the column card. 2. Horizontal scrollbar pinned to viewport bottom Was: `.o_fp_plant_kanban` was `min-height: 100vh` (block flow) + `.board` had `min-height: 520px; overflow-x: auto`. Scrollbar showed at the bottom of the .board element (~520px from top of board), floating mid-page below the empty columns. Now: parent is `height: 100vh; display: flex; flex-direction: column`. Header is `flex: 0 0 auto`; `.board` is `flex: 1 1 auto; min-height: 0` so it fills all remaining vertical and its scrollbar sits at the viewport bottom. `.col-scroll` switched from `max-height: calc(100vh - 260px)` to `flex: 1 1 auto; min-height: 0` so it expands inside the now-full- height column instead of being capped at a magic number. Version: fusion_plating_shopfloor 19.0.33.1.13. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../fusion_plating_shopfloor/__manifest__.py | 2 +- .../src/scss/components/_column_header.scss | 16 ++++--- .../static/src/scss/plant_kanban.scss | 47 +++++++++++++------ 3 files changed, 43 insertions(+), 22 deletions(-) diff --git a/fusion_plating/fusion_plating_shopfloor/__manifest__.py b/fusion_plating/fusion_plating_shopfloor/__manifest__.py index 6c6e3a64..b9c796e9 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.33.1.12', + 'version': '19.0.33.1.13', '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/components/_column_header.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_column_header.scss index d082b550..5f35ff15 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_column_header.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/components/_column_header.scss @@ -1,19 +1,21 @@ // _column_header.scss — depends on _plant_tokens.scss .o_fp_col_header { - padding: 6px 8px; + padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; - background: $plant-card-bg; - border: 1px solid $plant-card-border; - border-radius: 6px 6px 0 0; - border-bottom: 0; + // No own background or outer border — the parent .col carries them + // (full-height column-as-card layout). Just a bottom divider so the + // header reads as a distinct band above the scrollable body. + background: transparent; + border-bottom: 1px solid $plant-card-border; + flex: 0 0 auto; &.mine { - background: linear-gradient(180deg, $plant-mine-bg 0%, $plant-card-bg 100%); - border-color: $plant-mine-border; + // .col already paints the mine gradient + gold border. + border-bottom-color: $plant-mine-border; } .col-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss b/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss index ea9ffdf8..f5ba6f88 100644 --- a/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss +++ b/fusion_plating/fusion_plating_shopfloor/static/src/scss/plant_kanban.scss @@ -3,7 +3,13 @@ .o_fp_plant_kanban { padding: 8px; background: $plant-bg; - min-height: 100vh; + // Full viewport height + flex column so .board can grow to fill all + // remaining vertical space. min-height: 100vh would let .board's + // intrinsic height bubble up and put the horizontal scrollbar + // mid-page; height + flex pins the scrollbar to the viewport bottom. + height: 100vh; + display: flex; + flex-direction: column; color: $plant-text; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; @@ -14,9 +20,8 @@ padding: 8px 12px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); - position: sticky; - top: 0; - z-index: 10; + // Keep header at natural height; board takes remaining space. + flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; @@ -97,35 +102,49 @@ // (~280px) sits comfortably with breathing room. On a 1920px // desktop ~6 columns visible; on a 1366px tablet ~4 visible with // smooth horizontal scroll. User explicitly accepted side-scrolling. + // + // flex: 1 + min-height: 0 — the board fills all remaining vertical + // space below the sticky header, so the horizontal scrollbar pins + // to the viewport bottom (not mid-page where the board's natural + // height would have ended). .board { display: grid; grid-template-columns: repeat(9, minmax(300px, 1fr)); gap: 8px; - min-height: 520px; + flex: 1 1 auto; + min-height: 0; overflow-x: auto; - padding-bottom: 8px; // room for the horizontal scrollbar + padding-bottom: 4px; // room for the horizontal scrollbar } + // Each .col is now a proper bordered card that runs full board + // height — same visual treatment as Trello / Asana columns. The + // header (.o_fp_col_header) sits at the top with a divider; the + // scrollable body (.col-scroll) takes the rest. Previously .col + // had bg = page-bg (invisible) so columns visually ended at the + // header card — empty columns looked unbounded. .col { - background: $plant-bg; + background: $plant-card-bg; + border: 1px solid $plant-card-border; border-radius: 8px; - padding: 6px; display: flex; flex-direction: column; - gap: 6px; - min-width: 0; // grid-track minmax handles sizing + min-width: 0; // grid-track minmax handles sizing + min-height: 0; // allow flex children to scroll inside + overflow: hidden; // contain rounded corners over inner content &.mine { background: linear-gradient(180deg, $plant-mine-bg 0%, $plant-card-bg 100%); - border: 1px solid $plant-mine-border; + border-color: $plant-mine-border; } } .col-scroll { + flex: 1 1 auto; + min-height: 0; // critical — without this the children + // push the column past its parent height overflow-y: auto; display: flex; flex-direction: column; gap: 8px; - padding: 2px; - max-height: calc(100vh - 260px); - min-height: 200px; + padding: 6px; } .col-empty { font-size: 10px;