fix(css): force !important on iso-variant-stack [hidden] override #18
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "fix/panel-stack-important"
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?
Defeat Tailwind v4 preflight
[hidden]{display:none!important}so stacked panels stay in same grid cell.Two regressions reported on the live deploy: 1. Switching ISO artefact panels caused the hero column to jump in height. The grid-overlap stack relied on `display: block` for inactive panels but the React `hidden={!active}` prop (kept for U-07 a11y-tree exclusion) re-applies the UA default `[hidden] { display: none }`, collapsing 4 of 5 panels and sizing the wrap to whichever panel was active. Adds a single override `.iso-variant-stack > .iso-variant[hidden] { display: block }` so visibility+pointer-events stay the real toggle and the wrap stays at the height of the tallest panel. 2. The Open Research repo grid was a single 1fr column, three stacked rows. The prototype's grid is two columns — `calc(50% - 5px)` left for the two real repos, `200px` right for the Coming-Soon card spanning both rows — collapsing to 1fr below 1024 px. Restored both the base grid + the mobile reset. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>The earlier fix added `display: block` for stacked panels with the `hidden` attribute, but Tailwind v4's preflight ships `[hidden]:where(:not([hidden=until-found])){display:none!important}` in @layer base. The !important defeats any non-important author rule regardless of specificity, so 4 of 5 panels collapsed to display:none and the wrap height jumped on every tab-switch. Adds !important to the author rule. Both rules now duel as important, and the higher-specificity author rule (0,0,2,1) wins over the preflight (0,0,1,0). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>Pull request closed