@visns-studio/visns-components 6.24.3 → 6.25.0

package/src/components/styles/Form.module.scss

@@ -7,8 +7,46 @@
     display: block;
 }
 
+/* ============================================================================
+ * THE FORM GRID — four tracks, and the two it gives up when there is no room
+ * ----------------------------------------------------------------------------
+ * The grid was a flat `1fr 1fr 1fr 1fr` with nothing underneath it, so a
+ * `size: "quarter"` field held one of four tracks at EVERY width: about 80px
+ * on a 390px phone, which is a label that cannot be read over an input that
+ * cannot be typed in. Two tracks at 768 and one at 640 is the collapse.
+ *
+ * WHY A CONTAINER QUERY AND NOT A MEDIA QUERY. The window's width is not the
+ * question. The same `<Form>` renders in a full-page panel, in a 560px sheet,
+ * in a modal, and in a narrow side rail beside a grid — and a form in a 420px
+ * rail on a 2560px monitor has exactly the problem a form on a phone has. A
+ * media query answers "how big is the glass"; this layout needs "how much room
+ * do I actually have", and only the container knows that. The library already
+ * reaches for this where the same argument holds (Integrations' `.fields`,
+ * global-datagrid's native date filter), so it is the house pattern rather
+ * than a new dependency. Nothing here pins a browser floor that would forbid
+ * it; the same three engines that ship `color-mix()` — used freely across this
+ * library — ship container queries.
+ *
+ * ONE CONSEQUENCE WORTH KNOWING, because it is not obvious from the one line
+ * that causes it: `container-type: inline-size` also applies LAYOUT
+ * containment, which makes this element the containing block for any
+ * `position: fixed` descendant. Inside a form that is the colour picker's
+ * click-away scrim (Field.jsx's `cover`), which now covers the form rather
+ * than the whole window — clicking another field still dismisses the picker,
+ * clicking the page header no longer does. The scrim is the only fixed thing
+ * that renders in here; `.polActions` in GenericDynamic is a SIBLING of the
+ * container, not a child, so it is untouched.
+ *
+ * The item classes that answer these queries live in Field.module.scss
+ * (`.halfItem` / `.qtrItem`, written by Field.jsx from `settings.size`) —
+ * a different module, but the query is unnamed, so it resolves against the
+ * nearest ancestor container whichever file declared it. Keep the two ends in
+ * step: the breakpoints below and the ones in Field.module.scss are one rule
+ * written in two files because the class names are hashed per module.
+ * ==========================================================================*/
 .formcontainer {
     width: 100%;
+    container-type: inline-size;
 
     form {
         width: 100%;
@@ -24,6 +62,50 @@
     }
 }
 
+/* Two tracks. A half-width field is then the full row and a quarter is half of
+   one, which is the same proportion the four-track layout gave them — the
+   shape survives, it just has less of it.
+ *
+ * WHERE THESE TWO NUMBERS BITE, since they are container widths and not window
+ * widths and the two do not land in the same places. StandardModal's sizes are
+ * 420 / 560 / 800 and `.modal__content` spends 1rem a side, so:
+ *
+ *   large  (768 content) — exactly on this boundary, and `max-width` is
+ *                          inclusive, so a large dialog draws TWO tracks on a
+ *                          desktop where it used to draw four. Quarters go from
+ *                          ~180px to ~370px, which is roomier rather than
+ *                          wrong, but it is a visible change and this is where
+ *                          to look when somebody asks about it.
+ *   medium (528 content) — one track.
+ *   small  (388 content) — one track.
+ *   a 22rem side rail    — one track.
+ *
+ * If a form is wanted back at four tracks in a large dialog, the fix is this
+ * number and only this number — but it has to move in Field.module.scss and
+ * GenericDynamic.module.scss with it. */
+@container (max-width: 768px) {
+    .formcontainer form {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .halfBuilderItem {
+        grid-column: 1 / -1;
+    }
+}
+
+/* One track. Below this a two-up row is two ~150px fields, which is where a
+   date input starts clipping its own year. */
+@container (max-width: 640px) {
+    .formcontainer form {
+        grid-template-columns: 1fr;
+    }
+
+    .qtrBuilderItem,
+    .halfBuilderItem {
+        grid-column: 1 / -1;
+    }
+}
+
 .formItem {
     width: 100%;
     position: relative;

package/src/components/styles/GenericClientPortal.module.scss

@@ -25,71 +25,123 @@
     }
 }
 
+// ============================================================================
+// Header chrome — tokenised, NOT restyled.
+// ----------------------------------------------------------------------------
+// Every `--client-portal-*` property below falls back to the value this file
+// carried before, so a host that defines none of them renders byte-identically
+// to the version that shipped. They exist because the header is the one piece
+// of a client portal that has to look like the company whose portal it is, and
+// the markup for it lives in this library rather than in the host app — so
+// without a hook the only ways to brand it are forking the component or an
+// attribute selector against a generated class name, and both of those break
+// the next time this file is touched.
+//
+// Nothing here reads a host token directly. A host brands the header by
+// defining these properties (typically on `:root`), and can undo it by not.
+// ============================================================================
+
 .portalHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.5rem 1.25rem;
-    background-color: var(--tertiary-color, white);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    gap: var(--client-portal-header-gap, 1rem);
+    padding: var(--client-portal-header-padding, 0.5rem 1.25rem);
+    background: var(--client-portal-header-bg, var(--tertiary-color, white));
+    color: var(--client-portal-header-ink, inherit);
+    border-bottom: var(--client-portal-header-border, 0 solid transparent);
+    box-shadow: var(--client-portal-header-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
     z-index: 10;
-    height: 64px; // Increased height to accommodate larger logo
+    // Increased height to accommodate larger logo
+    height: var(--client-portal-header-height, 64px);
+    flex: none;
 }
 
 .logoContainer {
     display: flex;
     align-items: center;
-    margin-left: -1.25rem;
+    margin-left: var(--client-portal-logo-offset, -1.25rem);
     padding-left: 0.5rem;
+    min-width: 0;
 }
 
 .logo {
-    height: 52px;
-    max-width: 250px;
+    height: var(--client-portal-logo-height, 52px);
+    max-width: var(--client-portal-logo-max-width, 250px);
     object-fit: contain;
+    // `none` unless the host asks otherwise. A dark header needs the reverse of
+    // a logo drawn for a white one, and the host cannot swap the file from
+    // here — `brightness(0) invert(1)` is the usual answer.
+    filter: var(--client-portal-logo-filter, none);
 }
 
 .userInfo {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: var(--client-portal-user-gap, 0.75rem);
+    min-width: 0;
 }
 
 .welcomeText {
-    font-size: 0.8rem;
-    color: var(--paragraph-color, #555);
+    font-size: var(--client-portal-welcome-size, 0.8rem);
+    color: var(--client-portal-header-ink, var(--paragraph-color, #555));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .logoutButton {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    flex: none;
+    width: var(--client-portal-logout-size, 28px);
+    height: var(--client-portal-logout-size, 28px);
     padding: 0;
     background-color: transparent;
-    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.15);
-    border-radius: var(--radius, 4px);
-    color: var(--paragraph-color, #555);
+    border: 1px solid
+        var(
+            --client-portal-header-line,
+            rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.15)
+        );
+    border-radius: var(--client-portal-logout-radius, var(--radius, 4px));
+    color: var(--client-portal-header-ink, var(--paragraph-color, #555));
     cursor: pointer;
     transition: all 0.2s ease;
 
     &:hover {
-        background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.05);
-        border-color: var(--primary-color, #0f4229);
-        color: var(--primary-color, #0f4229);
+        background-color: var(
+            --client-portal-logout-hover-bg,
+            rgba(var(--primary-rgb, 0, 123, 255), 0.05)
+        );
+        border-color: var(
+            --client-portal-logout-hover-line,
+            var(--primary-color, #0f4229)
+        );
+        color: var(
+            --client-portal-logout-hover-ink,
+            var(--primary-color, #0f4229)
+        );
+    }
+
+    &:focus-visible {
+        outline: 2px solid
+            var(--client-portal-focus-ring, var(--primary-color, #0f4229));
+        outline-offset: 2px;
     }
 }
 
 .portalContent {
     display: flex;
     flex: 1;
-    height: calc(100vh - 64px); // Subtract header height
+    // Subtract header height — the same property the header is sized from, so
+    // a host that changes one cannot leave the two disagreeing.
+    height: calc(100vh - var(--client-portal-header-height, 64px));
 }
 
 .mainContent {
     flex: 1;
-    padding: 1.25rem;
+    padding: var(--client-portal-content-padding, 1.25rem);
     overflow-y: auto;
     color: var(--paragraph-color, #333);
 }

package/src/components/styles/GenericDashboard.module.scss

@@ -756,3 +756,53 @@
 }
 
 .modal__content { padding: 1.25rem; }
+
+// ============================================================================
+// The card, on a phone
+// ----------------------------------------------------------------------------
+// LAST IN THE FILE ON PURPOSE. Every declaration below overrides one written
+// earlier at the same specificity — `.widgetNo` is a single class here and a
+// single class there — so the same block sitting up beside the `grid__*` span
+// collapse it belongs with would be beaten by the rules it exists to override
+// and do nothing at all. Media queries carry no weight of their own.
+//
+// What changes and why: below 700px every card is one column wide, and the
+// reserved heights in this sheet exist so that cards SIDE BY SIDE line their
+// labels, values and buttons up with one another. Nothing sits beside a card
+// at this width. A stat tile is a label, a number and a button — three lines
+// — and it was reserving 180px for them: 40 of padding, 24 of gaps, 24 held
+// open under a 17px label and 48 held open under a 32px number. That is one
+// and a half cards to a 402px screen, on the surface whose whole job is to
+// answer three questions at a glance.
+//
+// Nothing here shrinks the number itself. The value is the content; the empty
+// space around it was the problem.
+// ============================================================================
+
+@media (max-width: 700px) {
+    // The token's own default rather than a flat value, so a project that has
+    // set --dash-card-padding keeps its figure at every width; only the
+    // shipped default tightens.
+    .grid {
+        --dash-pad: var(--dash-card-padding, 0.9rem);
+    }
+
+    .widgetItem {
+        gap: 0.5rem;
+    }
+
+    // Both floors go: each element is still exactly as tall as its content,
+    // and there is no neighbouring card to hold a line for.
+    .widgetTitle {
+        min-height: 0;
+    }
+
+    .widgetNo,
+    .widgetNo-alt {
+        min-height: 0;
+    }
+
+    .widgetLink {
+        padding-top: 0.25rem;
+    }
+}

package/src/components/styles/GenericDetail.module.scss

@@ -1207,10 +1207,15 @@
     z-index: 1000;
 }
 
+/* See DataGrid.module.scss's `.modalWide` for the whole note. Short version:
+   `min-width` outranks both `width` and `max-width`, so a flat 600px floor put
+   210px of the dialog — its right edge and its close button — off the side of
+   a 390px phone. 90vw is the width this rule already asks for, so the floor
+   can never outrank the line above it. */
 .modalWide {
     width: 90vw;
     max-width: var(--detail-max-width, 1400px);
-    min-width: 600px;
+    min-width: min(600px, 90vw);
 }
 
 .modal {
@@ -1384,6 +1389,63 @@
         0 12px 24px -12px color-mix(in srgb, var(--primary-color, #1b3933) 35%, transparent);
 }
 
+/* -- the same cluster, in the title row ----------------------------------- */
+
+/* `editPlacement: "header"` (see utils/editPlacement.js) hangs the SAME
+   cluster off the breadcrumb row instead of pinning it to the viewport. It is
+   a modifier rather than an edit to `.polActions` on purpose: the floating bar
+   is still the default on every other detail page in every other application,
+   and the two `:has(> :nth-child(2))` rules above are the whole of its
+   treatment.
+
+   Which is exactly what has to come off here. A pill with a blurred backdrop
+   is how a control says "I am floating over the page"; sitting in a header bar
+   it reads as a second bar drawn inside the first, and the elevation a lone
+   button carries reads as a button that has come loose. In the title row the
+   ground is the header, so the cluster is nothing but its buttons — `.btn`
+   itself is untouched, so they are the same buttons as everywhere else.
+
+   Both selectors are doubled (`.polActions.polActionsHeader`) to out-specify
+   the two rules above, which `:has()` lifts to two classes' worth. Source
+   order after them is not enough on its own. */
+.polActions.polActionsHeader {
+    position: static;
+    inset: auto;
+    z-index: auto;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    backdrop-filter: none;
+    box-shadow: none;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.polActions.polActionsHeader > * {
+    box-shadow: none;
+}
+
+/* The right-hand end of the title row: the total, a host's `actions`, and —
+   under this placement — the cluster. `margin-left: auto` does nothing while
+   the row fits (the bar is already `justify-content: space-between`); it is
+   what keeps the group on the right once it has WRAPPED onto its own line. */
+.titleActions {
+    margin-left: auto;
+}
+
+/* Wrapping is opt-in, and only for a header that actually received a cluster.
+   A record title is long ("Verkada Camera & Access Control" under a client
+   name) and a row of buttons is not compressible, so without this the title
+   is squeezed to a word per line to hold a shape that stopped fitting. The
+   buttons take their own line instead. Left alone for every page that has not
+   opted in, so no existing header can start wrapping. */
+.crmtitle:has(.polActionsHeader),
+.crmtitle--alternate:has(.polActionsHeader) {
+    flex-wrap: wrap;
+    row-gap: var(--spacing-sm, 0.5rem);
+}
+
 /* -- states --------------------------------------------------------------- */
 
 .noDataMessage {

package/src/components/styles/GenericDynamic.module.scss

@@ -176,8 +176,17 @@
     font-size: 1rem;
 }
 
+/* A third copy of the four-track form grid — this one wraps Field.jsx directly
+   (see GenericDynamic.jsx), so it has to declare the container too, or the
+   collapse written in Field.module.scss finds nothing to measure and the
+   fields stay four-up on a phone. `container-type` is the whole of what is
+   added here; the reasoning is over Form.module.scss's `.formcontainer`.
+   `.polActions` in this module is `position: fixed`, but it is a SIBLING of
+   this element rather than a descendant, so the layout containment that comes
+   with `container-type` does not move it. */
 .formcontainer {
     width: 100%;
+    container-type: inline-size;
 
     form {
         width: 100%;
@@ -188,6 +197,20 @@
     }
 }
 
+/* The track list, narrowed. What a "half" and a "quarter" mean against the
+   narrower list is re-stated in Field.module.scss, which owns those classes. */
+@container (max-width: 768px) {
+    .formcontainer form {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@container (max-width: 640px) {
+    .formcontainer form {
+        grid-template-columns: 1fr;
+    }
+}
+
 .formItem {
     width: 100%;
     position: relative;

package/src/components/styles/GenericFormBuilder.module.scss

@@ -2929,6 +2929,17 @@ select:not(:placeholder-shown) + .fi__span {
     opacity: 1;
 }
 
+/* No pointer means no hover, and a hidden control that is only revealed by an
+   event the device cannot generate is not hidden, it is GONE — on a tablet
+   these rows had no edit and no delete at all. `focus-within` above already
+   covers the keyboard; this covers the finger. The same pattern, and the same
+   sentence, as `_associationManager.scss`'s `.actions`. */
+@media (hover: none), (pointer: coarse) {
+    .cActions {
+        opacity: 1;
+    }
+}
+
 .cDelete:hover {
     color: var(--secondary-color) !important;
     background: rgba(var(--secondary-rgb, 60, 191, 125), 0.1) !important;

package/src/components/styles/GenericIndex.module.scss

@@ -1208,10 +1208,15 @@
     z-index: 1000;
 }
 
+/* See DataGrid.module.scss's `.modalWide` for the whole note. Short version:
+   `min-width` outranks both `width` and `max-width`, so a flat 600px floor put
+   210px of the dialog — its right edge and its close button — off the side of
+   a 390px phone. 90vw is the width this rule already asks for, so the floor
+   can never outrank the line above it. */
 .modalWide {
     width: 90vw;
     max-width: var(--detail-max-width, 1400px);
-    min-width: 600px;
+    min-width: min(600px, 90vw);
 }
 
 .modal {