@webority/theme 0.9.11 → 0.9.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "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/_components.scss

@@ -419,6 +419,31 @@
     --bs-dropdown-link-active-color: var(--color-primary-hover);
     --bs-dropdown-link-active-bg: var(--color-primary-soft);
     box-shadow: var(--wui-shadow-overlay);
+    // A long menu (account / workspace lists) must never spill past the screen and clip its
+    // last rows: cap the panel to the viewport and scroll INSIDE it. The room subtracted
+    // leaves space for a topbar-height trigger + margin — the common anchor for these long
+    // lists — so a top-anchored menu fits; Popper flips/shifts the panel for other anchors.
+    // The thin thumb matches the shared rail (--wui-scrollbar*), like .wui-scroll.
+    max-height: calc(100vh - 5rem);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--wui-scrollbar) transparent;
+}
+.dropdown-menu::-webkit-scrollbar {
+    width: 8px;
+}
+.dropdown-menu::-webkit-scrollbar-track {
+    background: transparent;
+}
+.dropdown-menu::-webkit-scrollbar-thumb {
+    background-color: var(--wui-scrollbar);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+.dropdown-menu::-webkit-scrollbar-thumb:hover {
+    background-color: var(--wui-scrollbar-hover);
+    background-clip: padding-box;
 }
 
 .dropdown-item {

package/scss/wui/_data.scss

@@ -13,14 +13,16 @@
     color: var(--color-text-subtle);
 }
 .empty-state-title {
-    font-size: 16px;
+    // Matches .tbl-empty-title (the DataTable empty state) so the two read as one family.
+    font-size: 18px;
     font-weight: 600;
     line-height: 1.35;
     color: var(--color-text);
 }
 .empty-state-message {
     margin: 6px 0 0;
-    font-size: 14px;
+    // Matches .tbl-empty-text.
+    font-size: 16px;
     line-height: 1.5;
     color: var(--color-text-muted);
 }
@@ -112,17 +114,27 @@
 .table-ledger tbody tr:hover td.wui-table-empty:has(> .tbl-empty) {
     background: transparent;
 }
-// Empty state sizes exactly like a POPULATED table — a standard responsive table. It fills
-// its container (base `.table { width: 100% }`), so the columns spread to use the width; when
-// the container is too narrow the columns compress as far as they can, and once even their
-// content can't fit, `.table-wrap` (base `overflow-x: auto`) scrolls horizontally rather than
-// clipping — every header label reads in full, never ellipsis-truncated into "REFEREN…".
+// The React AppDataTable renders its empty state as a SIBLING of the table, INSIDE `.table-wrap`
+// (the horizontal scroller), in this `.tbl-empty-block`. Two things fall out of that placement:
+//   1. the horizontal scrollbar sits at the BOTTOM of the wrap — below this message — instead of
+//      being wedged between the header band and the message (which is what an outside-the-wrap
+//      block produced), and
+//   2. `position: sticky; left: 0` + `width: 100%` pins the message to the wrap's VISIBLE width and
+//      holds it there while a wide header scrolls behind it: `width: 100%` on a child of an
+//      overflow container resolves to the container's CONTENT (visible) width, not its scroll width,
+//      so the message never grows the scroll region and never slides off on a narrow screen.
 //
-// So the empty state carries NO special width rule of its own: the base table layout already
-// gives responsive-then-scroll. We deliberately do NOT pin the message to the viewport with
-// `container-type` + `100cqw` (it forced the colSpan cell, and the whole table, up to the panel
-// width), and we do NOT shrink the table to `width: auto` (that collapsed the columns). Only the
-// cell reset above (no padding/border/hover) is empty-specific.
+// This deliberately does NOT use `container-type` + `100cqw` — the query container collapses
+// `.table-wrap` to a sliver when it is a flex/grid item (see the `.table-wrap` note below). Sticky
+// sidesteps that entirely. (The `.wui-table-empty` cell rules above remain for Razor, where the
+// empty state is author-placed inside a `<td colSpan>`.)
+.tbl-empty-block {
+    position: sticky;
+    left: 0;
+    // = the wrap's visible width (content box of the overflow container), never its scroll width.
+    width: 100%;
+    // `.tbl-empty` / `.tbl-empty-plain` inside own the centring and padding.
+}
 
 // ── Table (base) ──
 // The shared data-table look, on the plain `.table` class Bootstrap already

package/scss/wui/_display.scss

@@ -700,7 +700,8 @@ a.info-row:hover .info-value {
     font-size: 12.5px;
     color: var(--color-text-muted);
 }
-.timeline-at {
+.timeline-at,
+.timeline-time {
     color: var(--color-text-subtle);
     font-variant-numeric: tabular-nums;
 }
@@ -820,12 +821,30 @@ a.info-row:hover .info-value {
     justify-content: space-between;
     gap: 12px;
 }
-.timeline--progress .timeline-head .timeline-at {
+// Date OVER time — the stamp stacks vertically so the time reads on its own line beneath the
+// date. `.timeline-when` groups the two wherever a date+time stamp appears (both variants), so
+// the pair moves and aligns as one unit.
+.timeline-when {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 1px;
+}
+// Progress: the stamp is pinned top-right, so the stack is right-aligned under the title row.
+.timeline--progress .timeline-head .timeline-when {
     flex: none;
+    align-items: flex-end;
+    text-align: right;
+}
+.timeline--progress .timeline-head .timeline-at,
+.timeline--progress .timeline-head .timeline-time {
     font-size: 12.5px;
     color: var(--color-text-subtle);
     white-space: nowrap;
 }
+// The time-of-day line is a touch smaller/lighter than the date it sits under.
+.timeline-time {
+    font-size: 12px;
+}
 // An upcoming step greys down — it hasn't happened yet.
 .timeline--progress .timeline-item.is-upcoming .timeline-title {
     color: var(--color-text-muted);

package/scss/wui/_navigation.scss

@@ -127,6 +127,11 @@
 
 // Optional overflow wrapper: the scroll chevrons live HERE, outside the scrolling strip,
 // so they stay pinned while the tabs scroll under them.
+// A little horizontal padding insets the strip from its container's edges, so the first/last
+// tab — and its full-width active underline — never lands on a rounded container's corner (a
+// tab strip placed flush in a card read as the underline hanging outside it). Horizontal only:
+// both surfaces render this wrapper for horizontal strips and skip it for vertical, so the two
+// stay identical.
 .app-tabs-wrap {
     position: relative;
     display: flex;
@@ -146,10 +151,12 @@
     // Auto-scrolling the active tab into view (and the chevrons) glides rather than jumps.
     scroll-behavior: smooth;
 }
-// Doubled to (0,2,0) so the strip keeps scrolling even if a consumer loads Bootstrap
-// after the theme, which would otherwise let `.nav`'s flex-wrap:wrap win on order.
+// Doubled to (0,2,0) so the strip keeps scrolling AND keeps its gutters even if a consumer
+// loads Bootstrap after the theme, which would otherwise let `.nav`'s flex-wrap:wrap and
+// padding-left:0 win on source order.
 .app-tabs.app-tabs {
     flex-wrap: nowrap;
+    padding: 0 12px;
 }
 .app-tabs::-webkit-scrollbar {
     display: none;

package/scss/wui/_utilities.scss

@@ -187,8 +187,8 @@
     flex: none;
     display: inline-grid;
     place-items: center;
-    width: 40px;
-    height: 40px;
+    width: 55px;
+    height: 55px;
     border-radius: var(--radius);
     corner-shape: squircle;
     background: var(--color-primary-soft);
@@ -279,8 +279,8 @@
     font-size: 20px;
 }
 .page-header-sm .page-header-icon {
-    width: 34px;
-    height: 34px;
+    width: 49px;
+    height: 49px;
 }
 .page-header-lg {
     margin-bottom: 32px;
@@ -289,8 +289,8 @@
     font-size: 30px;
 }
 .page-header-lg .page-header-icon {
-    width: 48px;
-    height: 48px;
+    width: 63px;
+    height: 63px;
 }
 
 // ── Centre alignment ── (`align="center"`): for empty-state and wizard mastheads.