Fix the CSS defects the NLDD migration left behind #207
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "fix-silent-css-breakage"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Eight CSS defects, found two ways: a sweep of
mainfor the shapes the NLDD migration kept producing, and then looking at the result in a running app.The common thread is that none of them raised a signal.
vue-tscdoes not read CSS values, ESLint does not parse<style module>values, no test asserts on computed style, and avar()on a property that does not exist simply drops its declaration. Every one of these was found by measuring or by eye.Found by the sweep
CardShellwas a missed site of the #206 pattern. It suppresses the outline and sets--components-card-box-shadow, a custom property the card reads inside its shadow DOM, but neverbox-shadowitself. The global rule's opaque 6px band of page background still painted on the host, wiping out the drop shadow of the card above it - tabbing down the list made it blink away row by row.My check for this in #206 gave a false negative: it grepped for the substring
box-shadow, which--components-card-box-shadowcontains. Re-run anchored on the property,srcis clean.The Welkom heading was never centred.
nldd-titleresets slotted children withtext-align: start !importantand says so outright in its source: "a host cannot centre or justify our text". The two lines written to centre it did nothing. The host is shrunk and centred instead -align-selfwould not work either, the parent is a plain block.The dev user-switcher lost its dropdown arrow.
background:is the shorthand and resetsbackground-image, which is where the chevron comes from in the globalselectskin..wg-prose-inlineleft a gap where list markers used to be. It collapses lists toinlineand zeroes their margin, but left the 24pxpadding-leftfrom.wg-prose, so a one-line message summary containing a list showed a blank gap mid-sentence.Found by looking
The global
:focus-visiblerule mutated the element's radius. An outline follows the element's ownborder-radiusanyway, so the declaration only ever added a side effect. It showed on the breadcrumbs, which are inline links: a 4px radius on a 17px box drew a pinched pill.In the card modal the crumb ring was clipped.
.titletruncates withoverflow: hidden, which clips at the padding box, and a ring sits 2px outside the line box. On a card row, where nothing clips, the same ring was already correct - which is what located the cause. Padding on every side with a matching negative margin gives it room and leaves the text exactly where it was.overflow-clip-marginexpresses this directly and was verified in a browser to keeptext-overflowworking. Rejected on support: it is absent in Safari and would silently degrade to a clipped ring, which is the wrong trade for a focus indicator.The empty states broke their line at 35 characters against a readable measure of 45-75.
nldd-inline-dialogcaps its body atvar(--primitives-area-480)and exposes only icon-colour tokens, so that primitive is widened locally. Both sentences now fit on one line.Its action button spanned the whole dialog, because the component wraps its actions slot in a vertical
nldd-button-groupand a block-level button fills a column flex. No attribute exists for a content-sized button, so the host is sized and centred: 160px instead of 640px.Verified
Every fix measured in a running preview, with real keyboard focus for the rings.
vue-tscclean, 570 tests green on a cold vite cache, build green, eslint 0 errors.Related: #204 tracks the missing guard. Most of these would have been caught by a rule that resolves every
var()against the declared token set and flags partial overrides of shared rules.82b181cda37867f2b2617867f2b2611c7e76c773Fix four CSS defects that fail without any signalto Fix the CSS defects the NLDD migration left behindrobbertbos referenced this pull request2026-07-26 21:23:55 +00:00