@visns-studio/visns-components 6.24.4 → 6.26.0

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

@@ -177,10 +177,22 @@
     z-index: 1000;
 }
 
+/* The wide dialog: 90% of the glass, never past 1400px, and never narrower
+   than 600px — except that a 600px floor on a 390px phone is not a floor, it
+   is a 210px overflow with the dialog's right-hand edge and its close button
+   off the screen. `min-width` outranks `width` and `max-width` both, so the
+   flat 600 won every time it was wrong.
+ *
+ * `min(600px, 90vw)` keeps the floor doing its job on anything wide enough to
+ * honour it and hands the decision back to `width` on anything narrower — and
+ * 90vw is not a new number, it is the width this rule already asks for, so the
+ * floor can never outrank the line above it again. Restated verbatim in
+ * GenericIndex.module.scss and GenericDetail.module.scss; the three are one
+ * dialog wearing three hashed class names. */
 .modalWide {
     width: 90vw;
     max-width: 1400px;
-    min-width: 600px;
+    min-width: min(600px, 90vw);
 }
 
 .modal {
@@ -1581,10 +1593,26 @@
 }
 
 /* Tablet mode is a bench at arm's length worked with gloves on, so the
-   controls step up to the 44px tap-target floor. Scoped to body.tablet-mode,
-   the same signal the package already styles against in global-datagrid.css.
-   The grid's tablet rows are 52px, so 44px still clears the row edges. */
-:global(body.tablet-mode) {
+   controls step up to the 44px tap-target floor. The grid's tablet rows are
+   52px, so 44px still clears the row edges.
+
+   Written once as a mixin and emitted twice, because there are now TWO signals
+   that mean "a finger is driving this" and they must not be allowed to drift:
+
+     body.tablet-mode   the explicit per-view opt-in, the signal the package
+                        already styles against in global-datagrid.css. It now
+                        means "treat this as touch even on a mouse".
+     (pointer: coarse)  the primary pointing device is a finger. Nobody has to
+                        set it and no view config can forget it, which is the
+                        whole point — the opt-in only ever reached the handful
+                        of views whose JSON carried it, and every phone opening
+                        every other grid got 32px targets.
+
+   `pointer` reports the PRIMARY device: a touchscreen laptop answers `fine`
+   and is unaffected. `utils/useDensity.js` ORs the same two signals for the
+   geometry the grid has to compute in JS; these two blocks and that hook are
+   one decision expressed in the only two places it can be. */
+@mixin touch-tree-controls {
     .treeControlBtn {
         width: var(--grid-tree-control-size-tablet, 44px);
         height: var(--grid-tree-control-size-tablet, 44px);
@@ -1613,6 +1641,14 @@
     }
 }
 
+:global(body.tablet-mode) {
+    @include touch-tree-controls;
+}
+
+@media (pointer: coarse) {
+    @include touch-tree-controls;
+}
+
 /* =========================================================================
    treeGroupBy nesting: accent bar and member indent
 
@@ -2141,6 +2177,32 @@
     cursor: default;
 }
 
+/* The pager, under a finger.
+ *
+ * 28px is a mouse target. The first and last page arrows sit side by side with
+ * about 4px between them, and on a phone the thumb covers both — which is why
+ * paging a grid on a phone lands on the wrong page roughly as often as the
+ * right one. 44px is the floor, and it is affordable here because the bar
+ * already wraps (`flex-wrap: wrap`, above): the buttons take a second line
+ * rather than pushing the record count off the side.
+ *
+ * The row is the only part of the grid's own chrome that needed this. The
+ * COLUMN FILTER ROW could not be given the same treatment from here — Inovua
+ * measures its header height in JS from the theme's 32px and a 44px input
+ * inside it is clipped, not accommodated — so the filters step up only as far
+ * as the cell the theme already reserves for them (global-datagrid.css). */
+@media (pointer: coarse) {
+    .dataGridBottomContainer {
+        gap: 0.5rem;
+        padding: 0.5rem;
+    }
+
+    .dataGridBottomContainer button {
+        min-width: 44px;
+        height: 44px;
+    }
+}
+
 // -- empty state -------------------------------------------------------------
 
 .noDataMessage {
@@ -2152,3 +2214,94 @@
     color: var(--dg-muted);
     font-size: 0.875rem;
 }
+
+/* ==========================================================================
+   CARD MODE — the two controls that only exist below 640px
+   --------------------------------------------------------------------------
+   Sort, and the Cards/Table toggle. Icon squares rather than labelled buttons
+   because they share a 340px row with Add New, where three labelled buttons
+   wrap onto two lines.
+
+   `--control-height` is the same token the search field and Add New beside
+   them resolve, so the row keeps one height; it is 2.75rem under a coarse
+   pointer, which is also the 44px minimum a finger needs. There is no separate
+   touch rule here because there is nothing to correct.
+   ========================================================================== */
+.cardControl {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--control-height, 34px);
+    height: var(--control-height, 34px);
+    padding: 0;
+    color: var(--paragraph-color, #443c2b);
+    background: var(--surface-color, #fff);
+    border: 1px solid var(--dg-line, rgba(43, 43, 43, 0.14));
+    border-radius: var(--btn-br, var(--radius-sm, 4px));
+    cursor: pointer;
+}
+
+/* The sort sheet's list. One row per sortable field, both directions drawn —
+   a single button that toggles makes the reader press it to find out which
+   way it is about to go. */
+.sortSheet {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-sm, 0.5rem) 0;
+}
+
+.sortSheetEmpty {
+    margin: 0;
+    padding: var(--spacing-md, 1rem);
+    color: var(--muted-color, #6b7280);
+    font-size: var(--font-size-sm, 0.8125rem);
+}
+
+.sortSheetRow {
+    display: flex;
+    gap: var(--spacing-sm, 0.5rem);
+    align-items: center;
+    justify-content: space-between;
+    min-height: 2.75rem;
+    padding: 0 var(--spacing-md, 1rem);
+    border-bottom: 1px solid var(--border-color, #e1e1e1);
+}
+
+.sortSheetLabel {
+    display: inline-flex;
+    gap: 0.375rem;
+    align-items: center;
+    overflow: hidden;
+    min-width: 0;
+    color: var(--paragraph-color, #443c2b);
+    font-size: var(--font-size-sm, 0.8125rem);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.sortSheetDirections {
+    display: inline-flex;
+    flex: 0 0 auto;
+    gap: 0.25rem;
+}
+
+.sortSheetDirection {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* 2.75rem, not the control height: this is a bare icon in a list on a
+       touch screen, and it has nothing beside it to borrow a hit area from. */
+    width: 2.75rem;
+    height: 2.75rem;
+    padding: 0;
+    color: var(--muted-color, #6b7280);
+    background: none;
+    border: 0;
+    border-radius: var(--radius-sm, 4px);
+    cursor: pointer;
+}
+
+.sortSheetDirectionOn {
+    color: var(--primary-color, #1b3933);
+    background: var(--primary-color-lighter, rgba(27, 57, 51, 0.08));
+}

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

@@ -124,8 +124,14 @@
     min-height: var(--field-height, 50px);
 }
 
+/* The same four-track grid Form.module.scss draws, and the same container
+   declaration, so a form assembled out of THIS module's classes collapses the
+   way one assembled out of Form's does. See the long note over
+   Form.module.scss's `.formcontainer` for why the query asks the panel rather
+   than the window, and for the one consequence of `container-type`. */
 .formcontainer {
     width: 100%;
+    container-type: inline-size;
 
     form {
         width: 100%;
@@ -309,6 +315,43 @@
     width: 100%;
 }
 
+/* ----------------------------------------------------------------------------
+ * The field sizes, when the panel runs out of room.
+ *
+ * These are the OTHER HALF of the collapse declared over `.formcontainer` in
+ * Form.module.scss: that file narrows the track list, this one re-states what
+ * a "half" and a "quarter" mean against the narrower list. They have to be two
+ * files because CSS modules hash class names per module and Field.jsx writes
+ * these two classes while Form.jsx owns the container. Keep the breakpoints in
+ * step; there is no way to share them.
+ *
+ * The queries are unnamed, so each resolves against the nearest ancestor
+ * container — `.formcontainer`, whichever module declared it (Form's,
+ * GenericDynamic's, or this file's). A form with no container ancestor at all
+ * simply keeps the four tracks, which is the pre-collapse behaviour and a safe
+ * floor rather than a broken one.
+ *
+ * `grid-column: 1 / -1` and NOT `span 2` at the one-track step: `span 2` on a
+ * single-column grid does not clamp, it CREATES a second implicit column — the
+ * row would silently go back to two-up at exactly the width where two-up stops
+ * fitting.
+ * --------------------------------------------------------------------------*/
+
+/* Two tracks: a half is the whole row, a quarter is half of it. */
+@container (max-width: 768px) {
+    .halfItem {
+        grid-column: 1 / -1;
+    }
+}
+
+/* One track: everything is the row. */
+@container (max-width: 640px) {
+    .halfItem,
+    .qtrItem {
+        grid-column: 1 / -1;
+    }
+}
+
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
@@ -1333,7 +1376,15 @@ input[type='file']:hover {
     grid-template-columns: auto 1fr auto; /* Consistent grid for images */
 }
 
-/* Responsive Design */
+/* Responsive Design — the file-upload field's own previews.
+ *
+ * Deliberately still VIEWPORT queries while the grid collapse above is a
+ * container query, and the two are not in conflict: the grid asks how wide its
+ * panel is because that is what decides how many fields fit beside each other,
+ * and these ask how big the SCREEN is because a thumbnail is sized against the
+ * reader's eye and their thumb, not against the panel it happens to sit in.
+ * The 768 here and the 768 above therefore agree by coincidence rather than by
+ * contract; changing one does not oblige the other. */
 @media (max-width: 768px) {
     .image-preview {
         max-width: 150px;

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;