Adom UI Design System

@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.33.0",+  "version": "1.34.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": {},

@@ -73,10 +73,36 @@ instead of the boxes around them. - `display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start;` - A `1px` vertical hairline (`var(--line)`) between the columns, drawn as a   `border-left` on the right column, so the split reads without a heavy divider.-- Below **620px**: `grid-template-columns: 1fr`, demo button first, full width, hairline+- Below **700px**: `grid-template-columns: 1fr`, demo button first, full width, hairline   becomes a `border-top`. -  ⚠ **This number was 760px and it was WRONG.** Measured in John's real dock pane on+  ⚠ **This number has been wrong TWICE, and the second time is the instructive one.**++  **760px → 620px → 700px.** The first correction fixed the wrong quantity measured the wrong+  way; the second came from measuring the thing CSS actually sees.++  **PANE WIDTH IS NOT VIEWPORT WIDTH.** A 744px dock pane contains a **632px viewport**, so+  620 cleared the real number by 12px rather than the 124 I thought. Measure+  `window.innerWidth` from INSIDE your own page, never the pane.++  And at 632 the two-column layout loses the thing the strip exists for. Measured on nb's+  live page in a real browser at forced viewports, reading `scrollWidth` vs `clientWidth` per+  row:++  | Viewport | Columns | Table | Phrases truncated |+  |---|---|---|---|+  | 632 (his real pane) | two | 344px | **2 of 5**, incl. "open mouser in nb chrome personal" |+  | 619 | one | 535px | 0 of 5 |+  | 700 | two | 407px | 1 of 5 (only the longest) |+  | 744 | two | 438px | 1 of 5 |+  | 1280 | two | 952px | 0 of 5 |++  Two truncated columns lose the qualifier the phrase is teaching ("open mouser in nb+  chrom…"); one column at the same width fits everything. **One readable column beats two+  truncated ones**, so the collapse sits ABOVE the real viewport at 700. Two columns still+  render on any genuine desktop window, which is where they were always worth having.++  ⚠ **The original error, kept because it is the reusable part:** Measured in John's real dock pane on   2026-08-25: `innerWidth` is **744px**, so a 760px breakpoint meant the two-column layout   NEVER RENDERED in the pane it was designed for. Every app would have shipped a stacked   panel and looked compliant. Observed dock panes run roughly **744px to 853px**, so the@@ -156,8 +182,8 @@ Six frames, not four (nb's, and better than what this skill asked for):  | # | Width | Panel | |---|---|---|-| 1 | **744px** (the real pane) | open |-| 2 | **744px** | closed |+| 1 | **632px** (the real VIEWPORT inside a 744px pane) | open |+| 2 | **632px** | closed | | 3 | 390px | open | | 4 | 390px | closed | | 5 | wide (1400px+) | open |