@webority/theme 0.35.2 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.35.2",
+  "version": "0.36.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/wui/_kanban.scss

@@ -8,14 +8,24 @@
 // above it that stays at the top of the viewport while the page scrolls. The board scrolls inside
 // itself, so the page never scrolls sideways.
 //
+// A board with the `fill` attribute (React `fill`, Razor fill="true") fits the screen from md up:
+// the board is the viewport's height less --wui-kanban-fill-offset, every column stretches to it,
+// and each column's card list scrolls inside the column under its fixed head. A long column then
+// never scrolls the page, so every column stays under the pointer while a card is carried. Below
+// md a fill board keeps the phone layout unchanged: the page scrolls, which a thumb expects and
+// which keeps the sticky switcher, rather than a short scroll box nested inside a short screen.
+//
 // Sizing variables, set on .wui-kanban (or any ancestor) to override:
 //   --wui-kanban-column-width       basis width of an open column (288px)
 //   --wui-kanban-collapsed-width    width of a collapsed column strip (56px)
 //   --wui-kanban-gap                space between columns (16px)
 //   --wui-kanban-column-min-height  least height of a column, so short columns still read as
-//                                   lanes (560px; not applied in the phone one-column mode)
+//                                   lanes (560px; not applied in the phone one-column mode or on
+//                                   a fill board)
 //   --wui-kanban-sticky-top         where the phone switcher sticks (0, or under the app shell's
 //                                   topbar inside .app-shell)
+//   --wui-kanban-fill-offset        the height a fill board leaves for the page around it: the
+//                                   topbar, the page head, filters (240px)
 //
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
@@ -25,6 +35,7 @@
     --wui-kanban-gap: 16px;
     --wui-kanban-column-min-height: 560px;
     --wui-kanban-sticky-top: 0px;
+    --wui-kanban-fill-offset: 240px;
     display: block;
     position: relative;
     min-width: 0;
@@ -466,6 +477,30 @@
     }
 }
 
+// ── Fill: the board fits the screen and each column scrolls inside itself (md and up) ──
+@media (min-width: 768px) {
+    .wui-kanban[fill] .wui-kanban-board {
+        align-items: stretch;
+        height: calc(100dvh - var(--wui-kanban-fill-offset));
+    }
+    .wui-kanban[fill] .wui-kanban-column {
+        min-height: 0;
+    }
+    // 4px off the head and onto the list keeps the spacing, and leaves room inside the scroll box
+    // for the 2px focus ring of the first card.
+    .wui-kanban[fill] .wui-kanban-column:not([data-collapsed]) .wui-kanban-head {
+        flex: none;
+        padding-bottom: 4px;
+    }
+    .wui-kanban[fill] .wui-kanban-body {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior-y: contain;
+        padding-top: 4px;
+    }
+}
+
 // ── Phone column switcher and swipe hint (hidden from md up) ──
 .wui-kanban-switcher,
 .wui-kanban-hint {