/vehicles
VehicleDetail.vue:2
/vehicle-detail
registers.css:738 already claims exactly those four roots and carries R1–R8, C1 and S1–S5 for
them, so this file is an EXTENSION of that section, not a new home. Two grep hits look like they
contradict that and do not:
· `.cx-*` in boards.css (87 hits) is the COMPLAINTS board's namespace — `.cx-wrap`,
`.cx-lane`, `.cx-bucket`, `.cx-tab` (phone.css:498 says so outright). Different page, same
two letters. Every rule below is anchored on `.cx-wrapper` (never bare `.cx-…`) so it cannot
reach it.
· `.vd-*` in money.css (137 hits) is `.invd-*`, the invoice-draft page. Substring, not prefix.
The ONE shared component here that is not register-only is `Collapsible.vue`, whose hosts are
/customer-detail, /vehicle-detail and /quote-history-detail (the detail cluster). Every rule for
it below is scoped to `.cd-wrapper` / `.vd-wrapper`, so quote-history keeps whatever the detail
cluster decides for it. Correcting it unscoped would be the `.purple-gradient` failure again.
WHAT WAS RENDERED. Every page was screenshotted in BOTH themes at VIEWPORT=wide (1900) through the
run-app driver, plus the New-customer dialog, an open disclosure, a selected row and a hovered
row. /customers cannot load on this tenant at all (see the BUG note at the foot of this file), so
it was rendered through a harness that rewrites the one failing request; nothing about the page's
CSS is faked by that.
═════════════════════════════════════════════════════════════════════════════════════════════ */
/* ── E1. THE SPLIT IS THE WRONG WAY ROUND AT 1560px ─────────────────────────────────────────────
CONFIRMED — rendered, both boards, both themes.
C1 (registers.css:355) raised `--lx-page` from 1096/1144 to 1560 — correct, that dead space was
real — and then handed ALL of the new width to the detail pane with `minmax(0, 1fr)`. Measured on
the shot: the list column is still 34rem/37rem and the pane is now ~990px. The consequences are
both visible and both bad:
· In the pane, "Ägare" sits at x=808 and "Theo Montelin ›" ends at x=1704. The page's own
author had already written the rule this breaks — Customers.css:113 — "across 760px 'Senaste
besök' and 'Idag' end up at opposite ends of the screen; the eye travels further than the
information is worth". C1 shipped 990px.
· In the list, which did NOT grow, "2014 Ford Transit Connect 230 LWB 1.6 TDC…" and "2010
Volkswagen Passat 1.4 TG…" truncate — while a thousand pixels of pane sits empty beside them.
So the growth goes to the column that is short of room and the pane returns to the cap its author
measured. Same total measure, same centred composition; only the ratio changes. `1fr` on the LIST
rather than a second fixed number, because the list is by definition "the rest" once the pane is
capped. */
/* APPLIED TO BOTH THEMES, 2026-08-11, and deleted here. Identical values, unprefixed:
Customers.css:118 .cx-wrapper > .lx-split { minmax(340px, 1fr) minmax(0, 33rem) }
Vehicles.css:245 .vx-wrapper > .lx-split { minmax(340px, 1fr) minmax(0, 32rem) }
The argument above is the record of why the ratio is this way round. */
/* The pane sizes to its content (`align-self: start`, listLedgerStyle.ts:231) except for a 15rem
floor. Before a row is picked its whole content is one sentence, so that floor draws a 240px
bordered rectangle around a single line — the "page failed to load" read that _base.css:440
already fixed the TEXT position for but not the BOX. With the floor gone the pane is as tall as
what it says, and a selected record is unaffected (a dozen fact rows clear 240px on their own).
THIS RULE IS GONE AND THE FLOOR ITSELF IS GONE. `min-height: 15rem` was removed from
listLedgerStyle.ts outright, for both themes, rather than being cancelled here for two wrappers —
the argument above is about a pane that sizes to its content, which is what `align-self: start`
makes it in EVERY theme. Cancelling a shared length from a light-only file is the fork mechanism,
and it also left the fault live in dark: MEASURED on /vehicles at 1900, `.lx-sheet` unselected is
111px in light and 240px in dark, i.e. dark still draws the empty rectangle this fixed.
The three panes that are `align-self: stretch` (Work Queue, Telefon, and the quote console) are
unaffected either way — they are 700px+ scroll regions and never met the floor. */
/* ── E2. THE BUCKET HEADINGS ARE STILL SHOUTING ────────────────────────────────────────────────
CONFIRMED — probed, not guessed. On /vehicles, `.lx-bucket-name` computes
`text-transform: uppercase; letter-spacing: 0.66px`, i.e. "VOLKSWAGEN", "PEUGEOT", "FORD".
This is trap 3, exactly as described. THREE rules claim this class and the loser looks like a
winner:
_base.css:916 html[data-theme="light"] .lx-bucket .lx-bucket-name (0,3,1) sentence case
boards.css:344 html[data-theme="light"] .lx-bucket .lx-bucket-name (0,3,1) UPPERCASE
boards.css:632 html[data-theme="light"] .wq-wrapper .lx-bucket … (0,4,1) sentence case
_base and boards:344 tie on specificity and _base loads FIRST, so the uppercase one wins
everywhere. boards:632 then bought Work Queue back out of it with a wrapper class — and Work Queue
is the page that was signed off. The two registers were never given the same treatment, so the
app currently disagrees with itself about what a bucket heading is: sentence case on the console,
caps on the registers.
Same escape hatch, same specificity (0,4,1), for the two roots this cluster owns. Sentence case is
safe here without the ::first-letter dance: /vehicles' heading is a make read straight out of
`04_Customer_Vehicles.make` ("Volkswagen", verified in the REST response) and /customers' is a
single initial, so `text-transform: none` renders the string as stored. */
html[data-theme="light"] .cx-wrapper .lx-bucket .lx-bucket-name,
html[data-theme="light"] .vx-wrapper .lx-bucket .lx-bucket-name {
text-transform: none;
letter-spacing: 0;
}
/* ── E3. THE CAR CHIPS IN THE CUSTOMER PANE ARE BOXES INSIDE A BOX ─────────────────────────────
R7 gave `.cx-veh-chip` a surface and a `--keyline` border. Rendered, that is a bordered white
rectangle inside the bordered white pane, one per car — a container whose contents carry an edge
of their own, which is the depth-spent-twice rule stated at the smallest scale on the page.
They become rows on one hairline, with the darker inset as the hover. This is not a new idiom for
this file: P2 (registers.css:659) made exactly this call for `.chat-svc-item`, five framed boxes
inside a drawer, for exactly this reason. Keeping the two consistent is the point. */
html[data-theme="light"] .cx-wrapper .cx-veh-chip {
background: none;
border: 0;
border-radius: 0;
box-shadow: inset 0 -1px 0 0 var(--keyline);
transition: background-color 0.15s ease;
}
html[data-theme="light"] .cx-wrapper .cx-veh-chip:hover {
background: var(--surface-inset);
box-shadow: inset 0 -1px 0 0 var(--keyline);
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
E4. THE TWO RECORD PAGES — THE DISCLOSURE CARD
═══════════════════════════════════════════════════════════════════════════════════════════════
The single largest thing left on /customer-detail and /vehicle-detail, and the reason it survived
R8: R8 corrected `.glass-section`, and five of the seven sections on these pages are NOT
`.glass-section` — they are ``, a component with `