From 2b8d99f69dd1ebc6828111fcb6761e51de261a28 Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Wed, 27 May 2026 00:29:46 -0400
Subject: [PATCH] fix(configurator): preserve boolean_toggle slider styling (PO
 Pending fix)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

My .o_fp_xpr_cell rule set width/height: 18px on every input[type=
checkbox], which broke Bootstrap's .form-switch slider proportions
(switches need width: 2em / height: 1em). Result: PO Pending and
other boolean_toggle widgets rendered as a single grey circle with
no visible track.

Excluded .o_field_boolean_toggle from the checkbox override and added
explicit Bootstrap form-switch styling — width: 2em, height: 1.2em,
accent colour on checked state, accent-bg focus ring. Non-switch
checkboxes (Blanket SO, Block partial shipments etc.) keep the 18px
square treatment.
---
 .../static/src/scss/express_order.scss        | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss b/fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss
index 61d0b2cf..74c2221e 100644
--- a/fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss
+++ b/fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss
@@ -94,9 +94,12 @@
         }
         .o_field_widget select { cursor: pointer; }
 
-        // Native checkboxes inside Express cells — keep them visible at
-        // a comfortable size. Boolean toggle widget retains its own look.
-        .o_field_widget input[type="checkbox"] {
+        // Native (non-switch) checkboxes inside Express cells — keep
+        // them visible at a comfortable size. EXCLUDES the boolean_toggle
+        // widget (.o_field_boolean_toggle) which uses Bootstrap's
+        // .form-switch slider styling that breaks if we set a fixed
+        // width on the input.
+        .o_field_widget:not(.o_field_boolean_toggle) input[type="checkbox"] {
             width: 18px;
             height: 18px;
             min-height: 18px;
@@ -105,9 +108,35 @@
             accent-color: $xpr-accent;
         }
 
-        // Ensure Boolean/toggle aligns visually with the underline
-        .o_field_boolean,
+        // Boolean toggle widget — preserve Bootstrap's slider proportions
+        // (2em × 1em). Just centre vertically with the row height.
         .o_field_boolean_toggle {
+            padding: 5px 0;
+            min-height: 30px;
+            display: inline-flex;
+            align-items: center;
+
+            // Bootstrap form-switch styling — accent the slider
+            .form-check-input {
+                width: 2em !important;
+                height: 1.2em !important;
+                min-height: 1.2em !important;
+                cursor: pointer;
+                margin: 0;
+
+                &:checked {
+                    background-color: $xpr-accent;
+                    border-color: $xpr-accent;
+                }
+                &:focus {
+                    box-shadow: 0 0 0 0.15rem $xpr-accent-bg;
+                    border-color: $xpr-accent;
+                }
+            }
+        }
+
+        // Non-switch Boolean
+        .o_field_boolean:not(.o_field_boolean_toggle) {
             padding: 5px 0;
             min-height: 30px;
             display: flex;