fix(reports): use table layout for BoL signature row, drop flex on sig-box

Last fix added page-break-inside: avoid but the boxes still split
because wkhtmltopdf 0.12 ignores that rule inside flex containers,
and BOTH the .sig-box (display: flex) AND the Bootstrap .row
wrapper were flex.

Replace both with non-flex equivalents:

- .sig-box: dropped `display: flex` + `flex-direction: column` +
  `justify-content: flex-end`. Layout now uses padding + a fixed-
  height .sig-line block + the muted label below. Same visual
  result, but a plain block element so wkhtmltopdf honors the
  page-break rule.

- Replaced `<div class="row">` + 3 `<div class="col-4">` (Bootstrap
  flex grid) with a `<table class="sig-table">` containing one row
  of three 33% tds. wkhtmltopdf treats table rows as atomic for
  page-breaking, so the whole signature row now stays on a single
  page.

Verified with pypdf: page 1 has the cert statement, page 2 has
all three signature labels together — no more sliced boxes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-19 07:38:59 -04:00
parent b16486f66b
commit b26aa45068
3 changed files with 31 additions and 25 deletions

View File

@@ -3,7 +3,7 @@
# License OPL-1 (Odoo Proprietary License v1.0)
{
'name': 'Fusion Plating — Reports',
'version': '19.0.4.3.0',
'version': '19.0.4.4.0',
'category': 'Manufacturing/Plating',
'summary': 'PDF reports for Fusion Plating: quote, SO, WO, packing, BoL, CoC, invoice, receipt, quality + compliance.',
'depends': [

View File

@@ -46,8 +46,10 @@
.fp-report .status-ok { color: #2e7d32; font-weight: bold; }
.fp-report .status-warning { color: #f57f17; font-weight: bold; }
.fp-report .status-fail { color: #c62828; font-weight: bold; }
.fp-report .sig-box { border: 1px solid #000; padding: 14px 12px 8px 12px; min-height: 110px; display: flex; flex-direction: column; justify-content: flex-end; page-break-inside: avoid; break-inside: avoid; }
.fp-report .sig-line { border-bottom: 1px solid #000; min-height: 60px; }
.fp-report .sig-box { border: 1px solid #000; padding: 12px; page-break-inside: avoid; break-inside: avoid; }
.fp-report .sig-line { border-bottom: 1px solid #000; height: 60px; margin-bottom: 4px; }
.fp-report .sig-table { width: 100%; border-collapse: separate; border-spacing: 8px 0; margin-top: 16px; page-break-inside: avoid; break-inside: avoid; }
.fp-report .sig-table td { padding: 0; vertical-align: top; page-break-inside: avoid; break-inside: avoid; }
.fp-report .small-muted { font-size: 8pt; color: #666; }
.fp-report .fp-cell-mid { vertical-align: middle !important; }
.fp-report .fp-keep-together { page-break-inside: avoid; break-inside: avoid; }
@@ -86,8 +88,10 @@
.fp-landscape .status-ok { color: #2e7d32; font-weight: bold; }
.fp-landscape .status-warning { color: #f57f17; font-weight: bold; }
.fp-landscape .status-fail { color: #c62828; font-weight: bold; }
.fp-landscape .sig-box { border: 1px solid #000; padding: 14px 12px 8px 12px; min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; page-break-inside: avoid; break-inside: avoid; }
.fp-landscape .sig-line { border-bottom: 1px solid #000; min-height: 70px; }
.fp-landscape .sig-box { border: 1px solid #000; padding: 12px; page-break-inside: avoid; break-inside: avoid; }
.fp-landscape .sig-line { border-bottom: 1px solid #000; height: 70px; margin-bottom: 4px; }
.fp-landscape .sig-table { width: 100%; border-collapse: separate; border-spacing: 8px 0; margin-top: 16px; page-break-inside: avoid; break-inside: avoid; }
.fp-landscape .sig-table td { padding: 0; vertical-align: top; page-break-inside: avoid; break-inside: avoid; }
.fp-landscape .small-muted { font-size: 9pt; color: #666; }
.fp-landscape .fp-cell-mid { vertical-align: middle !important; }
.fp-landscape .fp-keep-together { page-break-inside: avoid; break-inside: avoid; }

View File

@@ -183,26 +183,28 @@
according to the applicable regulations of the Department of Transportation.
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-4">
<div class="sig-box">
<div class="sig-line"/>
<div class="small-muted">Shipper (Signature / Date)</div>
</div>
</div>
<div class="col-4">
<div class="sig-box">
<div class="sig-line"/>
<div class="small-muted">Carrier / Driver (Signature / Date)</div>
</div>
</div>
<div class="col-4">
<div class="sig-box">
<div class="sig-line"/>
<div class="small-muted">Consignee (Signature / Date)</div>
</div>
</div>
</div>
<table class="sig-table">
<tr>
<td style="width: 33.33%;">
<div class="sig-box">
<div class="sig-line"/>
<div class="small-muted">Shipper (Signature / Date)</div>
</div>
</td>
<td style="width: 33.33%;">
<div class="sig-box">
<div class="sig-line"/>
<div class="small-muted">Carrier / Driver (Signature / Date)</div>
</div>
</td>
<td style="width: 33.33%;">
<div class="sig-box">
<div class="sig-line"/>
<div class="small-muted">Consignee (Signature / Date)</div>
</div>
</td>
</tr>
</table>
</div>
</div>