fix(fusion_claims): service-booking wizard responsive — namespace Bootstrap classes + reorder media queries
The 19.0.9.5.0 CSS pass (padding/scroll) did not fix "fields sitting on each
other" on small screens. Deep dive against the live web.assets_backend bundle
found two compounding root causes (both measured, not guessed):
1. Dead media query. The @media(max-width:560px) collapse for the inner field
grids (.two/.three) and .timepick was nested BEFORE the base .two/.three/
.timepick rules. Equal specificity → the later base rule wins → the media
query never applied. matchMedia matched at 320/390px yet grids stayed 2–3
columns and crammed/truncated. Moved all @media overrides to the END of the
.o_service_booking block so they win the cascade.
2. Bootstrap class collision. The wizard reused row/card/grid/btn; Odoo's
backend Bootstrap applies .row{display:flex;margin:0 -16px}, .card{display:flex},
etc. globally even under the scoped parent (they win for properties the scoped
rule doesn't set). Measured: every .row computed display:flex + margin-left/
right:-16px. Renamed all layout classes to sb-* (sb-row/sb-card/sb-grid/sb-btn)
in service_booking.xml + service_booking.scss.
Verified at 320/390/768/1280 against the real prod bundle (computed
grid-template-columns now 1fr at <=560px; .sb-row margin 0 / display block;
2-col desktop intact). Documented both gotchas in fusion_claims/CLAUDE.md §47.
Bump fusion_claims 19.0.9.5.0 -> 19.0.9.6.0.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -3104,3 +3104,40 @@ After 9 rounds of deep diving, here's what CLAUDE.md covers vs the codebase:
|
||||
- Add new gotchas in the right format
|
||||
- Understand the soft-dep on `fusion_faxes` + `fusion_pdf_preview`
|
||||
- Know the deployment fact that fusion_portal is always co-installed
|
||||
|
||||
## 47. Service Booking wizard — two CSS gotchas (client action, `static/src/scss/service_booking.scss` + `xml/service_booking.xml`)
|
||||
|
||||
The OWL "Book a Service" wizard renders inside the Odoo **backend** (`web.assets_backend`),
|
||||
so the full Bootstrap 5 + Odoo stylesheet is live around it. Two non-obvious traps bit this
|
||||
wizard and were fixed in **v19.0.9.6.0** (a first, blind CSS pass in 19.0.9.5.0 did not fix
|
||||
the real cause — verify with a render, not by eye):
|
||||
|
||||
1. **Never reuse Bootstrap layout class names inside a backend component — namespace them.**
|
||||
The wizard originally used `row` / `card` / `grid` / `btn`. Scoping the rules under
|
||||
`.o_service_booking` does **not** stop Bootstrap's *global* `.row{display:flex;
|
||||
margin-left/right:calc(-.5*32px)}`, `.card{display:flex;flex-direction:column}`,
|
||||
`.grid{grid-template-rows:…}`, `.btn{…}` from also applying (they win for any property
|
||||
the scoped rule doesn't set). Measured live: every wizard `.row` computed
|
||||
`display:flex; margin-left:-16px; margin-right:-16px` — the negative gutter pulled fields
|
||||
to the card edges and flexed label+input pairs. **Fix:** all custom layout classes are
|
||||
`sb-*` (`sb-row`/`sb-card`/`sb-grid`/`sb-btn`). Keep that prefix for any new wizard class
|
||||
that could collide with Bootstrap (`col`, `container`, `form-*`, `badge`, …).
|
||||
|
||||
2. **A nested `@media` block must come AFTER the base rule it overrides (equal specificity).**
|
||||
SCSS preserves source order. The responsive `@media (max-width:560px){ .two,.three{
|
||||
grid-template-columns:1fr } … }` was nested high in the file, *before* the base
|
||||
`.two{grid-template-columns:1fr 1fr}` / `.three` / `.timepick` rules. Both selectors have
|
||||
the same specificity, so the later base rule overrode the media query — it was **dead**,
|
||||
and the inner field-grids never collapsed to one column on a phone (fields crammed 2–3
|
||||
across). `matchMedia('(max-width:560px)')` returned true while the columns stayed 2-up —
|
||||
the tell that it's a cascade-order bug, not a media-match bug. **Fix:** all responsive
|
||||
`@media` overrides live at the **end** of the `.o_service_booking { … }` block.
|
||||
|
||||
**How it was verified (do this, don't eyeball):** pull the live compiled bundle from prod
|
||||
(`env['ir.qweb']._get_asset_bundle('web.assets_backend').css()` returns `ir.attachment`
|
||||
record(s) in Odoo 19 — read `.raw`, not a string), render the wizard markup against it with
|
||||
the real web-client height/scroll chain (`html,body{height:100%}` → `.o_web_client` flex
|
||||
column → 46px navbar + `.o_action_manager{flex:1;min-height:0}` so the wizard's
|
||||
`height:100%;overflow:auto` scrolls) at 320/390/768/1280, and read computed
|
||||
`grid-template-columns` / `margin-left` / `display`. A standalone vanilla-Bootstrap repro is
|
||||
**not** faithful — it rendered fine and falsely cleared the bug.
|
||||
|
||||
Reference in New Issue
Block a user