@webority/theme 0.68.3 → 0.70.1

package/scss/wui/_media.scss

@@ -723,6 +723,11 @@
     padding: 0;
     font-size: 12px;
 }
+.file-input.file-input-tall .file-input-text {
+    white-space: normal;
+    text-align: center;
+    overflow-wrap: anywhere;
+}
 
 // Large preview shown once an image exists; hover reveals a "Change image"
 // overlay.

package/scss/wui/_modal-remote.scss

@@ -62,7 +62,7 @@
     padding: 0;
 }
 .modal.wui-remote-drawer .modal-dialog.wui-remote-drawer-dialog {
-    margin: 0;
+    margin: 0 0 0 auto;
     max-width: none;
     width: min(var(--wui-modal-max-width, 480px), 100%);
     height: 100%;
@@ -87,3 +87,39 @@
         transition: none;
     }
 }
+
+// On a phone the drawer rises from the bottom edge as a sheet instead of sliding in from the end.
+@media (max-width: 767.98px) {
+    .modal.wui-remote-drawer .modal-dialog.wui-remote-drawer-dialog {
+        position: absolute;
+        inset: auto 0 0 0;
+        width: 100%;
+        height: auto;
+        max-height: 90dvh;
+        margin: 0;
+        transform: translateY(100%);
+    }
+    .modal.wui-remote-drawer.show .modal-dialog.wui-remote-drawer-dialog {
+        transform: none;
+    }
+    .modal.wui-remote-drawer .wui-remote-drawer-dialog .wui-modal {
+        height: auto;
+        max-height: 90dvh;
+        border-radius: var(--wui-radius-lg) var(--wui-radius-lg) 0 0;
+    }
+    .modal.wui-remote-drawer .wui-remote-drawer-dialog .wui-modal::before {
+        content: "";
+        display: block;
+        width: 36px;
+        height: 4px;
+        margin: 8px auto 0;
+        border-radius: 2px;
+        background: var(--color-border);
+    }
+}
+
+// A side panel dims the page behind it without blurring it, so the list stays readable.
+body:has(> .modal.wui-remote-drawer.show) > .modal-backdrop {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}

package/scss/wui/_overlays.scss

@@ -600,6 +600,21 @@
     max-width: min(92vw, 400px);
 }
 
+// An end-side stack moves clear of an open side drawer, so a toast never covers the panel's
+// content or its Save button. Widths mirror the drawer sizes in _drawer.scss; !important beats
+// Bootstrap's .end-0 utility, which is itself !important.
+@include media-breakpoint-up(md) {
+    body:has(.wui-drawer[open]:not([side="start"])) .wui-toast-container.end-0 {
+        right: min(480px, 100%) !important;
+    }
+    body:has(.wui-drawer[open][size="sm"]:not([side="start"])) .wui-toast-container.end-0 {
+        right: min(360px, 100%) !important;
+    }
+    body:has(.wui-drawer[open][size="lg"]:not([side="start"])) .wui-toast-container.end-0 {
+        right: min(640px, 100%) !important;
+    }
+}
+
 // Bootstrap's .toast-container stacks children with margin-bottom: $toast-spacing (1.5rem),
 // which ADDED to the flex gap above — the stack spacing is the gap alone.
 .wui-toast-container > :not(:last-child) {

package/scss/wui/_page-header-bar.scss

@@ -1,6 +1,7 @@
-// ── Bar ── (`size="bar"`): one 40px header row. The breadcrumbs lead as an inline prefix, the
-// title takes the spare width and ends in an ellipsis, and the row never wraps from md up.
-// Below md the row wraps, so the actions drop under the title instead of overlapping it.
+// ── Bar ── (`size="bar"`): one 40px header row. The breadcrumbs lead as an inline prefix. The
+// title keeps its content width and a spacer takes the spare width, so the views follow the title
+// and the tools and actions sit at the far end. Below md the row wraps, so the actions drop under
+// the title instead of overlapping it.
 // Selectors name `.page-header.page-header-bar` because `.page-header-bar` alone is also the
 // inner row of every other size.
 .page-header.page-header-bar {
@@ -10,27 +11,58 @@
     // The bar sits 4px above the first content block.
     margin-bottom: 4px;
 }
+[data-density="compact"] .app-content:has(.page-header.page-header-bar) {
+    --app-content-padding-top: 8px;
+}
 .page-header.page-header-bar .page-title {
-    flex: 1 1 0;
-    min-width: 0;
+    flex: 0 1 auto;
+    min-width: min(12ch, max-content);
     font-size: 20px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+.page-header.page-header-bar:has(> .page-header-bar-views) .page-title {
+    max-width: 280px;
+}
 .page-header.page-header-bar .page-status,
-.page-header-bar-views,
-.page-header-bar-meta,
 .page-header-bar-tools,
+.page-header-bar-meta,
 .page-header.page-header-bar .page-actions {
     flex: none;
 }
+.page-header-bar-views {
+    flex: 0 1 auto;
+    min-width: 0;
+}
+.page-header-bar-spacer {
+    flex: 1 1 0;
+    min-width: 0;
+}
 .page-header-bar-crumbs {
     flex: none;
     font-size: 13px;
     color: var(--color-text-muted);
     white-space: nowrap;
 }
+.page-header-bar-crumbs .breadcrumb {
+    --bs-breadcrumb-divider: "/";
+    margin: 0;
+    flex-wrap: nowrap;
+}
+.page-header-bar-crumbs .breadcrumb-item,
+.page-header-bar-crumbs .breadcrumb-item a {
+    color: var(--color-text-muted);
+    text-decoration: none;
+}
+.page-header-bar-crumbs .breadcrumb-item a:hover {
+    text-decoration: underline;
+}
+.page-header-bar-crumbs .breadcrumb-item:last-child::after {
+    content: "/";
+    padding-inline-start: var(--bs-breadcrumb-item-padding-x, 0.5rem);
+    color: var(--color-text-muted);
+}
 .page-header-bar-views,
 .page-header-bar-tools,
 .page-header-bar-bulk {
@@ -51,6 +83,9 @@
     display: none;
 }
 .page-header-bar-meta {
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
     font-size: 13px;
     color: var(--color-text-muted);
     white-space: nowrap;
@@ -63,6 +98,9 @@
 }
 .page-header.wui-page-header-meta-below > .page-header-bar-meta {
     flex: 0 0 100%;
+    flex-wrap: wrap;
+    white-space: normal;
+    column-gap: 16px;
     line-height: 16px;
 }
 
@@ -74,4 +112,22 @@
     .page-header.page-header-bar .page-title {
         flex: 0 1 auto;
     }
+    .page-header-bar-crumbs {
+        display: none;
+    }
+    .page-header-bar-views {
+        order: 5;
+        flex: 1 1 100%;
+        min-width: 0;
+    }
+    .page-header-bar-meta {
+        order: 6;
+        flex: 1 1 100%;
+        flex-wrap: wrap;
+        white-space: normal;
+    }
+    .page-header-bar-tools {
+        flex-wrap: wrap;
+        min-width: 0;
+    }
 }