From 416daa36d298778834fe43f738b3b14735c0761b Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Wed, 27 May 2026 00:40:06 -0400
Subject: [PATCH] =?UTF-8?q?feat(configurator):=20pack=20right=20column=20a?=
 =?UTF-8?q?longside=20tall=20PO=20block=20=E2=80=94=20no=20dead=20space?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous tightening removed the row-span but reintroduced a worse
problem: the tall PO block (with PO Pending + Expected By + chase
warning visible = ~250px) had only 2 small cells next to it
(Customer Job # / Job Sorting). 200px+ of vertical air below them
before row 3 started.

Layout now:
- Row 1: Customer (1-2) + Delivery Address (3-4)
- Rows 2-5 left: PO Block spans 4 grid rows (cols 1-2)
- Rows 2-5 right: 4 PAIRS of fields fill cols 3-4 in DOM order:
    Row 2: Customer Job # + Job Sorting
    Row 3: Material/Process + Lead Time
    Row 4: Payment Terms + Delivery Method
    Row 5: Pricelist + Quote Validity
- Row 6: Blanket SO + Invoice Strategy + conditional Deposit % / Progress %
  (full 4-col width, kicks in after the PO block ends)

CSS Grid auto-flow places the right-side cells in the open positions
next to the row-span-4 PO block. Each grid row auto-sizes to the max
of the cells in that row (PO block top portion or the right pair),
so PO block height naturally aligns with the 4 right rows — no dead
air on either side.
---
 .../static/src/scss/express_order.scss        |  1 +
 .../views/fp_express_order_views.xml          | 25 ++++++++++++-------
 2 files changed, 17 insertions(+), 9 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 9343da86..347b0305 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
@@ -164,6 +164,7 @@
 
     .o_fp_xpr_cell.span-2 { grid-column: span 2; }
     .o_fp_xpr_cell.row-span-2 { grid-row: span 2; }
+    .o_fp_xpr_cell.row-span-4 { grid-row: span 4; }
     .o_fp_xpr_cell.required > label::after {
         content: " *";
         color: $xpr-bad;
diff --git a/fusion_plating/fusion_plating_configurator/views/fp_express_order_views.xml b/fusion_plating/fusion_plating_configurator/views/fp_express_order_views.xml
index 9c5da380..8667af88 100644
--- a/fusion_plating/fusion_plating_configurator/views/fp_express_order_views.xml
+++ b/fusion_plating/fusion_plating_configurator/views/fp_express_order_views.xml
@@ -87,11 +87,16 @@
                         </div>
 
                         <!-- ============================================================
-                             PO Block in row 2 cols 1-2 (naturally tall).
-                             Customer Job # / Job Sorting fill cols 3-4 of row 2;
-                             remaining fields go into compact rows below.
+                             PO Block fills LEFT half (cols 1-2) across rows 2-5.
+                             RIGHT half (cols 3-4) flows 4 pairs of fields
+                             alongside it — Customer Job #/Job Sorting, Material
+                             Process/Lead Time, Payment Terms/Delivery Method,
+                             Pricelist/Quote Validity.
+
+                             Net: PO block ~250px height matches 4 × ~60px right
+                             stack — no dead air on either side.
                              ============================================================ -->
-                        <div class="o_fp_xpr_cell span-2 o_fp_xpr_po_block">
+                        <div class="o_fp_xpr_cell span-2 row-span-4 o_fp_xpr_po_block">
                             <div class="o_fp_xpr_po_head">
                                 <span>CUSTOMER PO</span>
                                 <field name="po_status" widget="badge"
@@ -127,7 +132,7 @@
                             </div>
                         </div>
 
-                        <!-- Row 2 right side: Customer Job # + Job Sorting -->
+                        <!-- Right side row 2: Customer Job # + Job Sorting -->
                         <div class="o_fp_xpr_cell">
                             <label for="customer_job_number">Customer Job #</label>
                             <field name="customer_job_number" nolabel="1"/>
@@ -139,7 +144,7 @@
                                    placeholder="Type to create a new bucket..."/>
                         </div>
 
-                        <!-- Row 3 — Material/Process + Lead Time + Payment + Delivery -->
+                        <!-- Right side row 3: Material/Process + Lead Time -->
                         <div class="o_fp_xpr_cell">
                             <label for="material_process">Material / Process</label>
                             <field name="material_process" nolabel="1"
@@ -156,6 +161,8 @@
                                        class="o_fp_xpr_range_input"/>
                             </div>
                         </div>
+
+                        <!-- Right side row 4: Payment Terms + Delivery Method -->
                         <div class="o_fp_xpr_cell">
                             <label for="payment_term_id">Payment Terms</label>
                             <field name="payment_term_id" nolabel="1"
@@ -166,7 +173,7 @@
                             <field name="delivery_method" nolabel="1"/>
                         </div>
 
-                        <!-- Row 4 — Pricelist + Quote Validity + Blanket + Invoice Strategy -->
+                        <!-- Right side row 5: Pricelist + Quote Validity -->
                         <div class="o_fp_xpr_cell">
                             <label for="pricelist_id">Currency / Pricelist</label>
                             <field name="pricelist_id" nolabel="1"
@@ -177,6 +184,8 @@
                             <label for="validity_date">Quote Validity</label>
                             <field name="validity_date" nolabel="1"/>
                         </div>
+
+                        <!-- Row 6 (after PO block ends) — Blanket + Invoice + conditional % -->
                         <div class="o_fp_xpr_cell">
                             <label for="is_blanket_order">Blanket Sales Order</label>
                             <div class="o_fp_xpr_inline_pair">
@@ -191,8 +200,6 @@
                             <label for="invoice_strategy">Invoice Strategy</label>
                             <field name="invoice_strategy" nolabel="1"/>
                         </div>
-
-                        <!-- Conditional row 5 — only renders when deposit/progress invoice strategy -->
                         <div class="o_fp_xpr_cell" invisible="invoice_strategy != 'deposit'">
                             <label for="deposit_percent">Deposit %</label>
                             <field name="deposit_percent" nolabel="1"/>