@visns-studio/visns-components 6.24.3 → 6.25.0

package/src/components/navBadges.js

@@ -12,6 +12,8 @@
  *     badges={{ tickets: 4 }}                       -> "4", "Tickets, 4 open"
  *     badges={{ tickets: { count: 4, label: 'unread' } }}
  *                                                   -> "4", "Tickets, 4 unread"
+ *     badges={{ tickets: { count: 4, tone: 'danger' } }}
+ *                                                   -> "4", on crimson
  *
  * The object form exists because the pill itself is only a number and the
  * accessible name has to say what the number IS — a screen reader announcing
@@ -23,6 +25,46 @@
 /** The noun the accessible name falls back to. See the note above. */
 export const DEFAULT_BADGE_NOUN = 'open';
 
+/**
+ * The severities a badge can wear, ORDERED — mildest first, worst last.
+ *
+ * The order is the point of the array rather than incidental to it:
+ * `navBadge()` rolls a group up by index, so a fourth step later means putting
+ * a name in the right place here and changing nothing else. They are named as
+ * severities and not as colours ('danger', never 'red') because the stylesheet
+ * owns what each one looks like, and a project that recolours the bar must not
+ * have to restate its data to do it.
+ *
+ * A tone says how BAD the number is; it never says what the number counts —
+ * the count and its noun already do that. It is deliberately absent from the
+ * accessible name: see badgeAriaLabel.
+ */
+export const BADGE_TONES = ['ok', 'warn', 'danger'];
+
+/**
+ * The tone a badge has when the consumer published none.
+ *
+ * EVERY badge carries a tone, the plain-number form included, so the pill has
+ * one shape to render and no caller has to guard for a missing field — the
+ * same bargain `display` is on, and for the same reason it had to be made
+ * twice before it stuck.
+ */
+export const DEFAULT_BADGE_TONE = 'ok';
+
+/**
+ * The published tone, or the default.
+ *
+ * Anything unrecognised falls back rather than passing through: the value ends
+ * up in a CSS-module class name, and a typo'd tone would resolve to no class
+ * at all — a pill with no ground and no ink, which is a worse failure than
+ * merely being the wrong colour.
+ */
+const toneOf = (raw) => (BADGE_TONES.includes(raw) ? raw : DEFAULT_BADGE_TONE);
+
+/** The worse of two tones, by their position in BADGE_TONES. */
+const worseTone = (a, b) =>
+    BADGE_TONES.indexOf(a) >= BADGE_TONES.indexOf(b) ? a : b;
+
 /**
  * Above this the pill reads `99+`.
  *
@@ -65,6 +107,9 @@ const normalise = (raw) => {
         // off `count` while the pill printed an undefined `display`.
         display: badgeDisplay(whole),
         noun: (isObject && raw.label) || DEFAULT_BADGE_NOUN,
+        // Only the object form can carry one — a bare number is a count and
+        // says nothing about severity, so it is always the default.
+        tone: toneOf(isObject ? raw.tone : undefined),
     };
 };
 
@@ -98,7 +143,7 @@ export function badgeFor(badges, id) {
  * reader cannot act on — because the row it belongs to is not in their menu —
  * is worse than no number: they would go looking for work that is not theirs.
  *
- * @returns {{count: number, display: string, noun: string}|null}
+ * @returns {{count: number, display: string, noun: string, tone: string}|null}
  */
 export function navBadge(badges, nav) {
     if (!badges || !nav) {
@@ -128,6 +173,15 @@ export function navBadge(badges, nav) {
         // a group whose children count different nouns cannot be summarised
         // in one word anyway, and in practice one child carries the badge.
         noun: parts[0].noun,
+        // The WORST tone under it, not the first one and not an average. The
+        // parent is a closed dropdown: the reader cannot see which child is on
+        // fire, so the only useful thing the heading can tell them is that one
+        // of them is. Rolling up the mildest — or the first contributor's, as
+        // the noun does — would hide the one row that needed opening.
+        tone: parts.reduce(
+            (worst, part) => worseTone(worst, part.tone),
+            DEFAULT_BADGE_TONE
+        ),
     };
 }
 
@@ -140,6 +194,14 @@ export function navBadge(badges, nav) {
  *
  * The REAL count, not the capped display: "Tickets, 340 open" is useful and
  * "Tickets, 99+ open" is a rendering artefact.
+ *
+ * The TONE is not spoken, and that is a decision rather than an omission.
+ * There is no honest word for it: 'danger' is a class name, and "Tickets, 4
+ * open, danger" is speech nobody wrote. A consumer that has a real word for
+ * why its badge is red already has somewhere to put it — `label`, which is the
+ * noun this name is built from, so `{ count: 4, label: 'over a week', tone:
+ * 'danger' }` reads "Tickets, 4 over a week" and the colour is the same fact
+ * for people who can see it.
  */
 export function badgeAriaLabel(label, badge) {
     if (!badge || !label) {

package/src/components/navDrawer.js

@@ -0,0 +1,147 @@
+/**
+ * The mobile drawer's rows, derived from the navigation tree the bar draws.
+ *
+ * Split out of Navigation.jsx for the same reason navActive.js and
+ * navBadges.js were: what the drawer shows is a handful of judgement calls,
+ * every one of them testable without a DOM, a router or a stylesheet.
+ * Navigation.jsx renders what this file decides and decides nothing itself.
+ *
+ * THE ONE IDEA HERE IS THAT THE DRAWER IS FLAT. The header bar hangs a group's
+ * pages off a dropdown, which is a hover affordance wearing a keyboard escape
+ * hatch — on a phone there is no hover, the group heading has no page of its
+ * own to navigate to, and a menu that only opens on a gesture the device does
+ * not have is a menu nobody can reach. So a group becomes a heading followed
+ * by its children as ordinary rows: everything the reader may open is visible
+ * the moment the drawer is, and nothing in the drawer is a disclosure control.
+ *
+ * The cost is length — the drawer is as tall as the whole menu — and that is
+ * the trade being made deliberately. A scroll is cheaper than a tap that does
+ * nothing.
+ *
+ * VISIBILITY IS NOT RE-DECIDED HERE. `permission`, `hidden` and the group
+ * cascade are all computed by Navigation's own effect and arrive on the nodes;
+ * this only reads them, with exactly the tests the two rendering paths in
+ * Navigation.jsx already use, so a drawer can never show a page the bar would
+ * have withheld.
+ */
+// The extension is not decoration: this module is imported directly by
+// `node --test`, which resolves ESM specifiers to the letter, and Vite
+// resolves an explicit extension just as happily as a bare one.
+import { isNavActive, bestMatchingUrl, cleanUrl } from './navActive.js';
+
+/**
+ * The test the header applies to a TOP-LEVEL entry.
+ *
+ * `permissionKey === ''` is a deliberate second door: an entry that names no
+ * permission at all is public, and the effect that stamps `permission` may not
+ * have run on the very first render. Both are copied verbatim from the bar's
+ * own filter rather than restated in a tidier form — the two must agree, and
+ * the cheapest way to guarantee that is for them to be the same expression.
+ */
+const showsInBar = (nav) =>
+    !!nav &&
+    nav.hidden !== true &&
+    (nav.permission === true || nav.permissionKey === '');
+
+/**
+ * The test the header applies to a DROPDOWN child, which is stricter: a child
+ * has to have been granted, not merely not withheld (see `renderChildren`).
+ */
+const showsInDropdown = (child) =>
+    !!child && child.hidden !== true && child.permission === true;
+
+/**
+ * @typedef {Object} DrawerRow
+ * @property {'link'|'heading'} kind  a heading is inert — see below.
+ * @property {string} id             the nav id, for the badge lookup.
+ * @property {string} label          what the row reads as.
+ * @property {string} [url]          links only.
+ * @property {string} [target]       links only; passed through untouched.
+ * @property {number} depth          0 top level, 1 inside a group.
+ * @property {boolean} active        this is the page being viewed.
+ */
+
+/**
+ * Flatten a navigation tree into drawer rows.
+ *
+ * Four shapes go in and three come out:
+ *
+ *   - a leaf (url, no children)        -> one link row.
+ *   - a group (children, no url)       -> a HEADING row, then its children.
+ *   - both (url AND children)          -> a LINK row, then its children. The
+ *     parent has a page of its own and the drawer is the one surface where
+ *     that page is otherwise unreachable, since there is no dropdown to open
+ *     and no hover to open it with.
+ *   - neither (no url, no children)    -> a heading with nothing under it,
+ *     which is exactly what the bar draws for it: an inert <span>. Rendering
+ *     nothing instead would be a quieter lie about the config.
+ *
+ * ACTIVE IS PER ROW, NOT PER BRANCH. A parent that owns children is matched on
+ * its OWN url only (`isNavActive(url, [], …)`, no child urls) — in the bar it
+ * takes the highlight for anything underneath it because the children are
+ * hidden inside a closed menu, but here the child row is right there and
+ * lighting both would say the reader is standing in two places at once.
+ * Children use `bestMatchingUrl` across their siblings, the same rule and the
+ * same call the dropdown uses, so `/reports` and `/reports/prebuilt` cannot
+ * both claim the page.
+ *
+ * @param {Array} navigations  Navigation's `navData.navigations`.
+ * @param {string} currentPage the path being viewed, with or without its
+ *                             leading slash (Navigation passes it without).
+ * @returns {DrawerRow[]}
+ */
+export function drawerRows(navigations, currentPage) {
+    const rows = [];
+
+    (Array.isArray(navigations) ? navigations : []).forEach((nav) => {
+        if (!showsInBar(nav)) {
+            return;
+        }
+
+        const children = (nav.children || []).filter(showsInDropdown);
+        // Computed once per group rather than once per child: it is a scan of
+        // every sibling url, and it answers the same question for all of them.
+        const bestChild = children.length
+            ? bestMatchingUrl(
+                  children.map((child) => child.url),
+                  currentPage
+              )
+            : null;
+
+        if (nav.url) {
+            rows.push({
+                kind: 'link',
+                id: nav.id,
+                label: nav.label,
+                url: nav.url,
+                target: nav.target,
+                depth: 0,
+                active: isNavActive(nav.url, [], currentPage),
+            });
+        } else {
+            rows.push({
+                kind: 'heading',
+                id: nav.id,
+                label: nav.label,
+                depth: 0,
+                active: false,
+            });
+        }
+
+        children.forEach((child) => {
+            rows.push({
+                kind: 'link',
+                id: child.id,
+                label: child.label,
+                url: child.url,
+                target: child.target,
+                depth: 1,
+                active: bestChild !== null && cleanUrl(child.url) === bestChild,
+            });
+        });
+    });
+
+    return rows;
+}
+
+export default drawerRows;

package/src/components/sms/SmsThreadPanel.jsx

@@ -18,6 +18,7 @@ import {
     Loader2,
     MessageSquarePlus,
     Send,
+    ShieldCheck,
     Unplug,
     User,
     X,
@@ -47,6 +48,7 @@ import {
     resolveAnnotations,
     segmentCount,
     statusLabel,
+    threadCanReply,
     threadDisplayName,
     threadSubtitle,
     upsertMessage,
@@ -383,7 +385,14 @@ const SmsThreadPanel = ({
 
     const counts = segmentCount(body);
     const overLimit = counts.segments > MAX_SEGMENTS;
-    const canSend = body.trim() !== '' && !overLimit && !sending && Boolean(threadId);
+
+    // A sender-ID thread (`Apple`, `ANZ`, a short code) receives and can never
+    // answer. The server refuses the send with a 422 of its own; this is what
+    // stops anybody getting that far, and it gates `canSend` as well as the
+    // footer so a keyboard shortcut cannot slip past the missing button.
+    const canReply = threadCanReply(thread);
+    const canSend =
+        canReply && body.trim() !== '' && !overLimit && !sending && Boolean(threadId);
 
     const send = useCallback(
         (text) => {
@@ -990,12 +999,31 @@ const SmsThreadPanel = ({
             </div>
 
             {/*
-              * While selecting, the action bar stands where the composer does.
-              * Both at once would be a pane with two footers and two primary
-              * buttons, and picking messages out of a conversation is not
-              * something anybody does halfway through writing a reply.
+              * One footer, three things it can be.
+              *
+              * Receive-only wins outright: the compose box is REPLACED rather
+              * than disabled, because a dead Send button beside a live textarea
+              * reads as something being broken, where a sentence says why there
+              * is nothing to press — the only thing a reader wants to know when
+              * a two-factor code has just landed in front of them.
+              *
+              * Otherwise, while selecting, the action bar stands where the
+              * composer does. Both at once would be a pane with two footers and
+              * two primary buttons, and picking messages out of a conversation
+              * is not something anybody does halfway through writing a reply.
               */}
-            {selecting ? (
+            {!canReply ? (
+                <div className={styles.receiveOnly}>
+                    <div className={styles.banner}>
+                        <ShieldCheck size={15} strokeWidth={2} aria-hidden="true" />
+                        <span>
+                            <strong>{threadDisplayName(thread)}</strong> is a sender ID,
+                            not a phone number — messages from it are one-way and
+                            cannot be replied to.
+                        </span>
+                    </div>
+                </div>
+            ) : selecting ? (
                 <div className={styles.selectBar}>
                     <span className={styles.selectCount}>
                         {selectedIds.length === 0

package/src/components/sms/smsHelpers.js

@@ -645,6 +645,21 @@ export const threadDisplayName = (thread) => {
     );
 };
 
+/**
+ * Can this thread be answered, or does it only ever receive?
+ *
+ * A thread opened by an inbound message from an alphanumeric sender ID -
+ * `Apple` for a two-factor code, `ANZ`, a courier's short code - has no handset
+ * behind it. The SERVER decides this and sends `can_reply`; deriving it here
+ * from the shape of `external_number` would be a second definition of the rule,
+ * and the derived one is always the one that goes wrong.
+ *
+ * `undefined` means an older backend that predates the field, and that is read
+ * as repliable: a missing key must not silently take the compose box away from
+ * every ordinary conversation.
+ */
+export const threadCanReply = (thread) => thread?.can_reply !== false;
+
 /** The number under the name, only when it is not already the name. */
 export const threadSubtitle = (thread) => {
     if (!thread) return '';

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

@@ -242,6 +242,45 @@
 }
 
 
+// ---------------------------------------------------------------------------
+// Route-mounted screen (`ClientAuthScreen`)
+// ---------------------------------------------------------------------------
+// The split layout below is deliberately sized by its parent — that is what
+// makes it embeddable in a page that keeps its own header and footer. A router
+// route element has no such parent: GenericAuth renders the client sign-in
+// straight into the app's mount node, which is a plain auto-height block, so
+// `height: 100%` resolved against nothing and the whole two-pane screen sat in
+// a band at the top of the page with the page background below it.
+//
+// The staff screens never showed this because `.auth` is `position: fixed;
+// inset: 0` — it takes the viewport regardless of where it is mounted. This is
+// the same guarantee expressed as flow layout rather than as a fixed overlay,
+// so the screen still scrolls if its contents outgrow the viewport.
+//
+// Only GenericAuth's client auth routes wrap themselves in this. A consumer
+// embedding ClientAuth inside its own chrome gets the section, unchanged.
+// ---------------------------------------------------------------------------
+
+.screen {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    // 100vh first for anything without dynamic viewport units; browsers that
+    // understand dvh take the second and stop the mobile URL bar cropping the
+    // bottom of the form.
+    min-height: 100vh;
+    min-height: 100dvh;
+
+    // The card layout carries its own `min-height: 100vh` for the case where it
+    // is mounted bare. Inside the screen that is one viewport height too many —
+    // on a phone the screen is 100dvh and the card 100vh, and the difference is
+    // a scrollbar over nothing. Let the flex column give it the height instead.
+    > .container {
+        flex: 1 1 auto;
+        min-height: 0;
+    }
+}
+
 // ---------------------------------------------------------------------------
 // Split layout (`layout="split"`)
 // ---------------------------------------------------------------------------

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;