feat(configurator): pack right column alongside tall PO block — no dead space

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.
This commit is contained in:
gsinghpal
2026-05-27 00:40:06 -04:00
parent b7f280141f
commit 416daa36d2
2 changed files with 17 additions and 9 deletions

View File

@@ -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;

View File

@@ -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"/>