@momoi-labs/kiso 0.12.0 → 0.12.1

package/kiso/docs/components/card.md

@@ -80,7 +80,7 @@ it, so the mark points at the corner without touching it.
 | Token | Value | Meaning |
 | --- | --- | --- |
 | `--color-corner-mark` | `--color-border-strong` | Tick colour. |
-| `--corner-mark` | `1` | Opacity: marks on (`1`) or off (`0`). |
+| `--corner-mark` | `1` | Marks on (`1`) or off (`0`). Off marks also drop their inset, so they add no overflow to a scroll container around the panel. |
 | `--corner-mark-tick` | 4px | Length of one tick. |
 | `--corner-mark-gap` | 2px | Distance from tick end to the frame. |
 

package/kiso/docs/tokens.md

@@ -286,7 +286,7 @@ points at the corner without touching it.
 
 | Token | Value | Meaning |
 | --- | --- | --- |
-| `--corner-mark` | `1` | Opacity: marks on (`1`) or off (`0`). |
+| `--corner-mark` | `1` | Marks on (`1`) or off (`0`). Off marks also drop their inset, so they add no overflow to a scroll container around the panel. |
 | `--corner-mark-tick` | 4px | Length of one tick. |
 | `--corner-mark-gap` | 2px | Distance from tick end to the frame. |
 

package/kiso/ui.css

@@ -106,9 +106,11 @@ a, .link {
 a:hover, .link:hover { text-decoration: underline; }
 
 /* --- layout helpers ------------------------------------------------------ */
-.stack   { display: grid; gap: var(--spacing-lg); }
-.stack-sm{ display: grid; gap: var(--spacing-sm); }
-.stack-xs{ display: grid; gap: var(--spacing-xs); }
+/* One explicit column of minmax(0, 1fr), so a wide table, chart, or log line
+   inside a stack cannot widen the page; it scrolls or wraps in place instead. */
+.stack   { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
+.stack-sm{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); }
+.stack-xs{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }
 .row     { display: flex; align-items: center; gap: var(--spacing-sm); }
 .row-md  { display: flex; align-items: center; gap: var(--spacing-md); }
 .row-wrap{ display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
@@ -667,6 +669,9 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
 .table .col-tight { width: 1%; white-space: nowrap; }
 .th-sort { display: inline-flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; background: none; border: 0; font: inherit; color: inherit; padding: 0; }
 .table-toolbar { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
+/* In a toolbar a select is an accessory to the search, not a form field, so
+   it takes only what its longest option needs. */
+.table-toolbar > .select { width: auto; flex: none; }
 .table-footer  { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--color-border); font-size: var(--type-size-label); color: var(--color-muted-foreground); }
 
 /* ===========================================================================
@@ -682,12 +687,16 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
   font-size: var(--type-size-body);
   font-weight: var(--type-weight-medium);
   color: var(--color-muted-foreground);
+  white-space: nowrap; /* a strip that scrolls sideways must not wrap "Last run" */
   cursor: pointer;
 }
 .tabs button:hover { color: var(--color-foreground); }
 .tabs button[aria-selected="true"] { color: var(--color-foreground); }
+/* The underline stays inside the button, just above the strip's border, so a
+   strip that scrolls sideways has no extra pixel of block overflow to draw a
+   scrollbar for. */
 .tabs button[aria-selected="true"]::after {
-  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
+  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
   background: var(--color-primary);
   border-radius: var(--radius-full);
 }
@@ -989,7 +998,7 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
   font-weight: var(--type-weight-medium);
 }
 
-.page { padding: var(--spacing-xl); display: grid; gap: var(--spacing-xl); align-content: start; max-width: var(--size-content-max); }
+.page { padding: var(--spacing-xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); align-content: start; min-width: 0; max-width: var(--size-content-max); }
 .page-header { display: grid; gap: var(--spacing-2xs); }
 
 /* ===========================================================================
@@ -1067,9 +1076,17 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
   .chip-action { min-width: var(--size-touch-min); height: var(--size-touch-min); }
 }
 
+/* Narrow viewports: the sidebar stacks above main as compact navigation
+   instead of disappearing, since it may be the only way to reach a
+   destination. It keeps its own scroller so a long list does not push the
+   page down. */
 @media (max-width: 1023px) {
   .app-shell { grid-template-columns: 1fr; }
-  .sidebar { display: none; }
+  .sidebar {
+    position: static; height: auto; max-height: 40vh;
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--color-sidebar-border);
+  }
 }
 
 
@@ -1190,7 +1207,10 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
     left calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0,
     right 0 bottom calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
     right calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0;
-  inset: var(--appearance-mark-inset, calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap))));
+  /* Marks that are off (`--corner-mark: 0`) also collapse the inset to 0, so
+     the pseudo-element stops reaching outside the frame and a scroll container
+     around the panel does not scroll for marks nobody sees. */
+  inset: calc(var(--corner-mark, 1) * var(--appearance-mark-inset, calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap)))));
   background-image: var(--appearance-mark-images,
     linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
     linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {