← Commit history

1.32.0: minmax(180,220) can never reach 180 (min-width:0 on the fr track); use clamp(180px,30%,220px)

John Lauer ·b4fe1e44fd ·1mo ago ·parent d828447
2 files changed +16−3
package.json+1−1
@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.31.0",+  "version": "1.32.0",   "type": "skill",   "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container, plus shared icon assets (the settings cog) so every Adom app draws the same glyph.",   "dependencies": {},
skills/newbie-panel/SKILL.md+15−2
@@ -93,8 +93,21 @@ instead of the boxes around them.   collapsed fallback and nothing in its matrix could reveal that. Test at 744px (or whatever   you measure), not only at the widths that are convenient to reason about. -- At the narrow end of the band the left column may shrink to **180px** rather than-  collapsing; the demo button still fits on one line at that width.+- At the narrow end of the band the left column shrinks rather than collapsing. Use+  **`clamp(180px, 30%, 220px)`**, NOT `minmax(180px, 220px)`.++  ⚠ **`minmax()` DOES NOT WORK HERE, and this skill specified it wrongly in 1.25.0.** A+  `minmax()` track resolves to its MAX whenever the neighbouring `1fr` track can shrink, and+  every one of these panels sets `min-width: 0` on the content side (you have to, or a+  `nowrap` phrase blows the grid out). So the fr track's min-content is effectively zero, the+  left track always wins its maximum, and `minmax(180px,220px)` behaves as a hard **220px at+  every width**, including 620. The 40px the narrow end was supposed to buy back was+  unreachable by construction, and nobody would catch it by reading the CSS because+  `minmax()` LOOKS like it flexes. (Found by parts-search, 2026-08-25.)++  A container percentage genuinely tracks the pane: `clamp(180px, 30%, 220px)` resolves+  against the grid container, giving roughly 180px at a 620px container, ~200px at a 744px+  dock pane, and 220px from 853px up.    **AUDIT EVERY BREAKPOINT IN YOUR PAGE, NOT JUST THIS ONE.** Any `max-width` media query   that fires inside the **744-853px** pane band collapses something in the place users