@fasl-work/caos-app-shell 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Shared web-app shell + content primitives + design system for the CAOS / Faena public apps (ADR-0016).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",

package/styles.css

@@ -181,7 +181,12 @@ code, kbd { font-family: var(--font-mono); }
 .subtab { padding: 0.32rem 0.8rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-fg-subtle); font-size: 0.84rem; font-weight: 500; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
 .subtab:hover { color: var(--color-fg); border-color: var(--color-fg-faint); }
 .subtab.active { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); font-weight: 600; }
-.subtabs-vertical { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1.5rem; align-items: start; }
+/* `minmax(0, 1fr)`, NOT `1fr`. A bare `1fr` track is `minmax(auto, 1fr)`, and `auto` is the
+   min-content width of the panel, so a wide table in a sub-tab panel sized the whole grid to
+   the table and pushed the page past the viewport instead of scrolling inside its wrapper
+   (ADR-0071 rule 3). Measured on Porvenir's Datasets tab at 1280x800: the panel column
+   rendered 1380px wide on a 1280px viewport. */
+.subtabs-vertical { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
 .subtabs-vertical .subtablist { flex-direction: column; margin-bottom: 0; }
 .subtabs-vertical .subtab { text-align: left; border-radius: 8px; }
 @media (max-width: 760px) { .subtabs-vertical { grid-template-columns: 1fr; } .subtabs-vertical .subtablist { flex-direction: row; } }
@@ -293,7 +298,7 @@ html, body { overflow-x: hidden; }
    width of the display, which is the opposite of what ADR-0017 s1.1 specifies. The wide workbench
    opt-in is `.page-body.wide`; a prose page must keep the measure. */
 .page-body { min-width: 0; }
-.tabs, .tabpanel { min-width: 0; max-width: 100%; }
+.tabs, .tabpanel, .subtabs, .subtabpanels, .subtabpanel { min-width: 0; max-width: 100%; }
 .tablist { min-width: 0; max-width: 100%; width: 100%; }
 
 /* NO MAGIC CHROME NUMBER. An app surface must not compute its height from a hardcoded guess at the
@@ -308,6 +313,12 @@ html, body { overflow-x: hidden; }
 /* A viewport-filling app must not carry the prose footer margin: it becomes dead space between the
    content and the chrome. Measured on ChargeCascade as exactly 48px (3rem). */
 .app-shell.fixed .site-footer { margin-top: 0; }
+/* On a contained surface the footer competes with the instrument for a fixed height. With a
+   product's provenance and disclaimer it wrapped into 178px at 1600x900 (five lines), and the
+   instrument fell from 56 to 42 percent of the viewport, under the ADR-0071 rule 8 floor. The
+   text stays (ADR-0016 s2: provenance and the honest disclaimer are the footer's job); it is set
+   compact, so it takes two to three lines, not five. */
+.app-shell.fixed .site-footer .footer-inner { padding: 0.45rem 1.5rem; gap: 0.4rem; font-size: 0.74rem; line-height: 1.3; }
 
 /* ADR-0058 diagram i18n. A hand-authored architecture SVG carries BOTH languages inside ONE file,
    and the modal wrapper picks one. Two files would be two things to keep in step, and the one not
@@ -316,7 +327,7 @@ html, body { overflow-x: hidden; }
 [data-arch-lang] .l-es { display: none; }
 [data-arch-lang="es"] .l-en { display: none; }
 [data-arch-lang="es"] .l-es { display: inline; }
-
-/* The compact one-of-N case picker (ADR-0071 rule 7). Ten cases in four categories
-   cost a 308px chip block, 21% of a 2560x1440 viewport, and one row as a dropdown. */
-.cs-select { width: 100%; max-width: 460px; }
+
+/* The compact one-of-N case picker (ADR-0071 rule 7). Ten cases in four categories
+   cost a 308px chip block, 21% of a 2560x1440 viewport, and one row as a dropdown. */
+.cs-select { width: 100%; max-width: 460px; }