From 5c3e7a3cf3ed628f2d60452a45c041fc91b75100 Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Sun, 19 Apr 2026 13:15:00 -0400
Subject: [PATCH] =?UTF-8?q?fix(shopfloor):=20Manager=20Desk=20pickers=20?=
 =?UTF-8?q?=E2=80=94=20overflow=20+=20chevron=20+=20Take=20Over=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two issues from the wet-WO card screenshot:

**1. Tank picker bleeding past the card's right edge**

Native <select> defaults to `box-sizing: content-box`, so my
`width:100% + padding-right:2.25rem` rendered the picker wider than
its flex slot — the second picker (Tank, on wet WOs) overflowed the
card border at the typical card width.

Fix on `.o_fp_mgr_picker`:
  • `box-sizing: border-box` — keep total width inside the slot
  • `min-width: 0` — let flex actually shrink it past its content
  • Custom SVG chevron via background-image so we control the
    indicator's position exactly (Bootstrap's native chevron sits
    almost flush with the right border, which the user flagged
    earlier). 1rem of clearance from the right edge.

**2. Take Over button**

Earlier I'd collapsed it to icon-only because the wet card was too
wide; user pointed out the icon alone is confusing. Restored the
"Take Over" label (with icon prefix) so both buttons read cleanly:

   [👤 Take Over]  [↗ Open WO]

Asset cache cleared as part of the deploy so the recompiled SCSS
+ refreshed XML template ship together. A hard browser refresh
(DevTools → Empty Cache + Hard Reload) is needed to pick them up.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../static/src/scss/manager_dashboard.scss    | 47 +++++++++++++++----
 .../static/src/xml/manager_dashboard.xml      | 10 ++--
 2 files changed, 43 insertions(+), 14 deletions(-)

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 1afe0abf..96d44a0b 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
@@ -487,25 +487,45 @@
         }
     }
 
+    // Action group sits to the RIGHT of info on wide rows. flex:1 so it
+    // takes the remaining horizontal space (the dropdown then grows to
+    // fill); flex-wrap so on narrow widths the dropdown sits on its own
+    // line and the buttons go below at 50/50.
     .o_fp_mgr_wo_actions {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: $fp-space-2;
-        flex: 0 0 auto;
+        flex: 1 1 360px;        // takes remaining width, never under 360px
+        justify-content: flex-end;
     }
 
     .o_fp_mgr_picker {
-        min-width: 180px;
+        // box-sizing matters: native <select> defaults to content-box, so
+        // `width: 100% + padding-right` overflows. border-box keeps the
+        // picker inside its flex slot — the Tank dropdown was bleeding
+        // past the card's right edge before this.
+        box-sizing: border-box;
+        flex: 1 1 220px;        // grows to fill, but stays usable
+        min-width: 0;           // lets flex actually shrink it
         min-height: 40px;
-        padding: 0 $fp-space-3;
+        // Custom chevron via SVG background — controls its position
+        // exactly (browsers crowd the native chevron right against the
+        // edge). pe: none on chevron so the click still hits the select.
+        appearance: none;
+        -webkit-appearance: none;
+        background-color: $fp-card;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M6 7L0 1l1.4-1.4L6 4.2 10.6-.4 12 1z'/></svg>");
+        background-repeat: no-repeat;
+        background-position: right 1rem center;
+        padding: 0 2.5rem 0 $fp-space-3;
         border: 1px solid #{$fp-border};
         border-radius: $fp-radius-sm;
-        background-color: $fp-card;
         color: $fp-ink;
         font-size: $fp-text-sm;
         &:focus { @include fp-focus-ring; border-color: $fp-accent; }
     }
+    .o_fp_mgr_btn,
     .o_fp_mgr_wo_row .btn {
         min-height: 40px;
         padding: 0 $fp-space-3;
@@ -517,14 +537,23 @@
         color: $fp-ink;
         white-space: nowrap;
         transition: filter $fp-dur-fast $fp-ease;
+        flex: 0 0 auto;
         &:hover { filter: brightness(0.95); }
     }
 
-    @media (max-width: 720px) {
-        // Stack info + actions vertically on narrow viewports
-        .o_fp_mgr_wo_actions { width: 100%; }
-        .o_fp_mgr_picker { flex: 1 1 100%; max-width: 100%; }
-        .o_fp_mgr_wo_row .btn { min-height: $fp-touch-min; }
+    @media (max-width: 900px) {
+        // Mobile / narrow tablet: dropdown takes full width on its own
+        // line; the two buttons split 50/50 underneath.
+        .o_fp_mgr_wo_actions {
+            flex: 1 1 100%;
+            justify-content: stretch;
+        }
+        .o_fp_mgr_picker { flex: 1 1 100%; }
+        .o_fp_mgr_btn,
+        .o_fp_mgr_wo_row .btn {
+            flex: 1 1 calc(50% - #{$fp-space-2});
+            min-height: $fp-touch-min;
+        }
     }
 
 
diff --git a/fusion_plating/fusion_plating_shopfloor/static/src/xml/manager_dashboard.xml b/fusion_plating/fusion_plating_shopfloor/static/src/xml/manager_dashboard.xml
index e9f9207d..d7771f39 100644
--- a/fusion_plating/fusion_plating_shopfloor/static/src/xml/manager_dashboard.xml
+++ b/fusion_plating/fusion_plating_shopfloor/static/src/xml/manager_dashboard.xml
@@ -185,14 +185,14 @@
                                                         </option>
                                                     </t>
                                                 </select>
-                                                <button class="btn"
+                                                <button class="btn o_fp_mgr_btn"
                                                         t-on-click="() => this.onTakeOver(wo)"
-                                                        title="Assign yourself">
-                                                    <i class="fa fa-user"/>
+                                                        title="Assign this WO to yourself">
+                                                    <i class="fa fa-user me-1"/>Take Over
                                                 </button>
-                                                <button class="btn"
+                                                <button class="btn o_fp_mgr_btn"
                                                         t-on-click="() => this.openRecord('mrp.workorder', wo.id)">
-                                                    Open WO
+                                                    <i class="fa fa-external-link me-1"/>Open WO
                                                 </button>
                                             </div>
                                         </div>