← Commit history

1.14.1: the closed panel state needs breathing room; content padding belongs to the page, not the panel

John Lauer ·190763c192 ·1mo ago ·parent f135d32
2 files changed +23−1
package.json+1−1
@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.14.0",+  "version": "1.14.1",   "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+22
@@ -129,6 +129,28 @@ instead of the boxes around them. - The choice persists across reloads (namespaced localStorage, see **newbie-graduation**),   and auto-graduation closes it the same way a dismissal does. +### The CLOSED state still needs breathing room++John, 2026-08-24, looking at pup with the panel closed: *"the spacing when newbie panel is+collapsed is bad."* Closing the panel had left the app's first row jammed against the header+with a few pixels of gap, because the page's top padding lived on the PANEL rather than on+the page.++- **The content region owns its own padding, independent of the panel.** Put+  `padding: 20px 20px 24px` (or your app's content padding) on the region that holds+  everything below the header, and let the panel sit INSIDE that padding as one more block.+  Removing the panel then changes nothing about the page's relationship to the header.+- **Minimum 20px between the header's bottom border and the first thing under it**, in every+  state: panel open, panel closed, demo running.+- The gap must not CHANGE when the panel closes. If your first row sits 20px below the+  header with the panel open and 6px below it with the panel closed, your padding is on the+  wrong element.+- Same rule at the bottom: the last block keeps its padding whether or not the panel is+  there.++Check it by toggling: screenshot with the panel open and closed and compare the distance+from the header to the first content row. It should be identical.+ ## Two traps that keep a full-width panel a column  Found by chip-fetcher, the first app to convert: