@visns-studio/visns-components 6.24.4 → 6.26.0

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

@@ -0,0 +1,182 @@
+/**
+ * StackedRow — one grid row, stacked, for a screen too narrow to lay columns
+ * out side by side.
+ *
+ * ROWS, NOT CARDS. The vocabulary the mapper uses is a card's (title, subtitle,
+ * meta, badge) but nothing here is a Material card: no elevation, no inner
+ * border, no rounded panel, no margin between rows. The row keeps the grid's
+ * own zebra striping and its own divider, because a card per record is four
+ * times the height for the same four facts and a phone has the least height of
+ * anything we ship to.
+ *
+ * EVERY SIZE IS rem, AND THAT IS LOAD-BEARING. `styles/density.css` takes the
+ * root font-size to 112.5% under `data-density="large"`, so every line, gap and
+ * pad below grows by 1.125 with no rule in this file mentioning density. The px
+ * table in `utils/cardLayout.js` that fixes the ROW's height is deliberately a
+ * shade larger than 1.125× at every entry, so the computed height is always at
+ * or above what these rules need — over-allocating leaves a hairline of slack,
+ * under-allocating clips the last line, and only one of those is noticed.
+ *
+ * NO HOVER RULES ANYWHERE IN THIS FILE. It renders on a coarse pointer, where
+ * hover is either absent or sticky, and an action that appears on hover is an
+ * action a finger cannot find.
+ */
+
+.card {
+    display: flex;
+    gap: var(--spacing-sm, 0.5rem);
+    align-items: center;
+    box-sizing: border-box;
+
+    /* The cell is sized by the grid's fixed rowHeight; the row fills it and
+       clips rather than pushing it. Nothing inside may change the height —
+       a blank field collapses its line's CONTENT and leaves the row exactly
+       as tall as its neighbours. */
+    width: 100%;
+    height: 100%;
+    padding: 0.625rem 0;
+    overflow: hidden;
+}
+
+/* `min-width: 0` is the whole reason the ellipses work: a flex child's default
+   `min-width: auto` is its content's intrinsic width, so a long client name
+   would push the rail off the screen instead of being clipped. */
+.main {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+}
+
+.titleRow {
+    display: flex;
+    gap: 0.375rem;
+    align-items: baseline;
+    min-width: 0;
+}
+
+/* The record's own number, where it has one: a quote number, a ticket number.
+   Mono because it is read digit by digit and compared, not scanned. */
+.reference {
+    flex: 0 0 auto;
+    padding: 0 0.25rem;
+    color: var(--muted-color, #6b7280);
+    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+    font-size: var(--font-size-xs, 0.75rem);
+    line-height: 1.375rem;
+    background: var(--border-color, #e1e1e1);
+    border-radius: var(--radius-sm, 4px);
+}
+
+.title,
+.subtitle,
+.line {
+    /* Fixed height, so nothing may take a second line. Repeated on each rather
+       than shared through a parent because the renderers put their own
+       elements inside these and a rule on the parent does not reach them. */
+    overflow: hidden;
+    min-width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.title {
+    color: var(--heading-color, #1b3933);
+    font-size: 0.9375rem;
+    font-weight: var(--font-weight-semibold, 600);
+    line-height: 1.375rem;
+}
+
+.subtitle {
+    color: var(--muted-color, #6b7280);
+    font-size: var(--font-size-sm, 0.8125rem);
+    line-height: 1.125rem;
+}
+
+.line {
+    display: flex;
+    gap: 0.375rem;
+    align-items: baseline;
+    color: var(--paragraph-color, #443c2b);
+    font-size: var(--font-size-sm, 0.8125rem);
+    line-height: 1.125rem;
+}
+
+.lineLabel {
+    flex: 0 0 auto;
+    color: var(--muted-color, #6b7280);
+}
+
+.lineValue {
+    overflow: hidden;
+    min-width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+/* The click-to-call and click-to-mail anchors — the reason this treatment
+   exists. Accent-coloured because they are the only thing on the row that is
+   not the row's own link, and underlined so that reads as a decision rather
+   than as a colour scheme. */
+.channel {
+    overflow: hidden;
+    color: var(--primary-color, #1b3933);
+    text-decoration: underline;
+    text-underline-offset: 0.125rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+/* Right-hand rail: the state chip over the row's action icons.
+   `auto` width, never flexed — the main column is what gives way. */
+.rail {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: flex-end;
+    justify-content: center;
+    min-height: 2.75rem;
+    max-width: 45%;
+}
+
+.badge {
+    overflow: hidden;
+    max-width: 100%;
+    color: var(--paragraph-color, #443c2b);
+    font-size: var(--font-size-xs, 0.75rem);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+/* Always drawn, never on hover. The icons inside are the grid's own
+   `renderRowAction` / `renderSetting` output and already stopPropagation, so
+   the row's link and the rail's controls cannot both fire. */
+.actions {
+    display: flex;
+    gap: 0.125rem;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* THE HIT AREA, not the glyph.
+ *
+ * `.tdaction` in DataGrid.module.scss is a 28px square, and in the table that
+ * is the whole target — the action COLUMN reserves 44px per icon of width, but
+ * nothing widens the icon itself. 28px is under every touch guideline there
+ * is, and on a card the icons sit at the end of a row whose whole body is a
+ * link, so a near miss does not do nothing: it opens the record.
+ *
+ * So the WRAPPER is grown instead of the icon. Both of the grid's action
+ * entry points put their `onClick` on the wrapper — `.rowActionTrigger` for an
+ * inline row action, the `setting-*` span for a standard one — so the target
+ * grows and nothing about the drawn icon changes. Scoped to this module, so
+ * the table's own action column is untouched. */
+.actions > * {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+}

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

@@ -407,6 +407,82 @@
     .when { margin-left: 0; width: 100%; }
 }
 
+/* -- the phone ------------------------------------------------------------- */
+
+/*
+ * At 390px the 759 block above is doing the right thing and not enough of it.
+ * It fixes the header — one column, the timestamp on its own line — and leaves
+ * the two boxes the page is actually FOR at their desktop insets.
+ *
+ * Count the gutters an entry's text sits behind on a 390px screen: the CRM's
+ * page padding, then TicketWorkspace's `.main` card at 1rem a side, then this
+ * module's `.entry` at another 1rem. That is roughly 96px of chrome, a quarter
+ * of the glass, spent on nested padding around a line of email — and the
+ * composer pays it twice over, because its textarea then has its own 0.7rem
+ * inside that. Nothing overflows; it is simply the wrong split between frame
+ * and content at a width where content is scarce.
+ *
+ * So the two inner boxes give up half their side padding. The card edges still
+ * read as edges — they are drawn with a border, not with space — and the text
+ * gets about 28px of its width back per side.
+ *
+ * READ-AND-TRIAGE IS THE BAR for this pass: the thread has to be readable and
+ * the composer has to be usable. There is deliberately NO pinned action bar —
+ * a sticky Send over a thread this narrow costs a line of the conversation
+ * permanently, and the composer is already at the end of the page where the
+ * thumb is.
+ */
+@media (max-width: 480px) {
+    .entry,
+    .composer {
+        padding: 0.7rem;
+    }
+
+    /* The message's own scroll cap. 24rem is 384px — on an 844px-tall phone,
+       most of what can be seen at once, so a long forwarded chain fills the
+       screen and the reply under it is a scroll away with no sign it is there.
+       16rem still shows a real message and keeps the next entry in view. */
+    .body,
+    .bodyHtml {
+        max-height: 16rem;
+    }
+
+    /* Full-bleed Send, which is the phone convention for the one action a
+       screen exists to perform — and the only place in this library where a
+       full-width primary is right rather than a banner (see the note over
+       Form.module.scss's `.buttonContainer` for the desktop argument against
+       it). Nothing shares the row with it. */
+    .composerActions {
+        justify-content: stretch;
+    }
+
+    .send {
+        width: 100%;
+    }
+}
+
+/* 34px is a mouse target. Under a finger the Send button sits directly under a
+   textarea the reader has just been typing in, which is the worst place on the
+   page to miss — the miss lands in the textarea and looks like nothing
+   happened. 44px is the floor. Applied on the pointer rather than on a width,
+   because a tablet with a keyboard case is 1024px wide and still driven by a
+   thumb. */
+@media (pointer: coarse) {
+    .send {
+        min-height: 44px;
+        height: auto;
+    }
+
+    /* The image-unblock and quote-collapse chips in `.bodyBar` are 0.68rem
+       text in a pill; give them a real box rather than a line of type to aim
+       at. They stay small — they are qualifiers on a message, not actions on
+       the ticket — but they stop being a 16px-tall target. */
+    .bodyAction {
+        min-height: 32px;
+        padding: 0.25rem 0.6rem;
+    }
+}
+
 /* -- composer -------------------------------------------------------------- */
 
 .composer {

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

@@ -1106,6 +1106,66 @@ input.checkControl {
     font-size: 0.75rem; // 12px at a 16px root
 }
 
+// ---------------------------------------------------------------------------
+// Mounted in the sidebar rail, and in the mobile drawer
+// ---------------------------------------------------------------------------
+// `actionsPlacement: 'sidebar'` — and, below 1024px, the header layout's
+// drawer — draws the account actions as full-width rows instead of chips. The
+// block that holds them advertises itself with `data-nav-actions="sidebar"`
+// (Navigation.jsx / Navigation.module.scss `.rail-actions`), which is all this
+// file needs to know. Notification.module.scss and Sms.module.scss carry the
+// same block; a chip and a row are two different things in three places.
+//
+// The row's box — full width, the rail's padding, left-aligned, and the LABEL
+// beside the icon — all come from `.rail-actions`. The trigger publishes no
+// label of its own, so the row publishes one as `--nav-action-label` and the
+// rail hangs it off the trigger's `::after`. Only what this file would
+// otherwise force back is restated here.
+[data-nav-actions='sidebar'] {
+    // The chip's lift and scale read as a stray button in a list of rows.
+    // The focus ring is left alone — it is the only keyboard affordance the
+    // row has.
+    .trigger {
+        &:hover,
+        &:focus,
+        &:active {
+            transform: none;
+        }
+
+        &:hover {
+            background-color: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.05);
+            color: var(--secondary-color);
+        }
+    }
+
+    // `top: 100%` drops the panel below the row. These rows are pinned to the
+    // FOOT of the rail, so that is below the foot of the viewport. Beside the
+    // rail, bottom-aligned with the row that opened it.
+    .popoverWrapper {
+        top: auto;
+        right: auto;
+        bottom: 0;
+        left: calc(100% + 10px);
+        margin-top: 0;
+    }
+
+    @media (max-width: 1024px) {
+        // Inside the drawer there is nothing to the right, so the panel opens
+        // upward from the row.
+        .popoverWrapper {
+            left: 0;
+            bottom: calc(100% + 8px);
+        }
+
+        // Keeps the panel inside a phone's viewport: 348px of rows plus a
+        // head, a search bar and a footer is taller than the room above the
+        // drawer's footer.
+        .rows {
+            max-height: 40vh;
+        }
+    }
+}
+
 // ---------------------------------------------------------------------------
 // Generator
 // ---------------------------------------------------------------------------
@@ -2006,6 +2066,138 @@ input.checkControl {
     }
 }
 
+// ---------------------------------------------------------------------------
+// The phone: six columns become two lines
+// ---------------------------------------------------------------------------
+//
+// The table sheds a column at a time down to 900px, which is the right answer
+// for a tablet and runs out at a phone: what is left below 640 is Title,
+// Username, Visibility, 2FA and five action buttons across roughly 350px of
+// glass. Every one of those tracks is then narrower than the word in its own
+// header, so the table stops being a table — it is six columns of hyphenated
+// fragments over a horizontal scrollbar.
+//
+// So each row becomes a small card of two lines: the title (with the host and
+// the client already sitting under it from the 1200px step) on the first, and
+// everything that qualifies it — username, visibility, the live 2FA code — on
+// the second, followed by the actions. This is SharePointGrid's `620` idea
+// carried one step past where columns can go: that grid drops a column at each
+// width until only the name and the date are left, and this is what happens
+// when even two tracks will not fit.
+//
+// THE SORT CONTROLS SURVIVE, which is the part that is easy to get wrong. The
+// obvious `thead { display: none }` takes the only sort control on the screen
+// with it — there is no sort menu in the toolbar to fall back on. Instead the
+// header row collapses to a wrapped strip of just the two sortable headings
+// (`SORTS` in VaultManager.jsx is Title and Username, and they are the first
+// two `th`), which reads as the row of chips it now looks like. The four
+// non-sortable headings are labels for cells that no longer sit under them, so
+// those do go.
+@media (max-width: 640px) {
+    // The header strip. `display: block` on the `tr` and `inline-block` on the
+    // `th` rather than flex, because a table row is not a flex container in
+    // every engine without also restating `display` on the `table` and the
+    // `tbody`, and doing that throws away the browser's row model for nothing.
+    .table thead tr {
+        display: block;
+        padding: 0.35rem 0.7rem;
+        // The rule under the header moves from the cells to the row, because
+        // the cells are now a wrapped strip and a hairline under each of them
+        // draws two short underlines instead of one line.
+        border-bottom: 1px solid var(--v-line);
+        background: var(--v-surface);
+    }
+
+    .table thead th {
+        display: inline-block;
+        padding: 0.25rem 0.5rem 0.25rem 0;
+        border-bottom: 0;
+    }
+
+    // Everything after the two sortable columns. `nth-child` and not a class,
+    // because these are the toolkit-free `<th>`s the component writes inline
+    // and giving four of them a class each to hide them all is noise.
+    .table thead th:nth-child(n + 3) {
+        display: none;
+    }
+
+    // A row is a card. The border that separated rows becomes the card's own
+    // bottom edge, which is the same hairline in the same place.
+    .table tbody tr {
+        display: block;
+        padding: 0.6rem 0.7rem;
+    }
+
+    .table tbody td {
+        display: inline;
+        padding: 0;
+        vertical-align: baseline;
+    }
+
+    // Line one: the title block, which already carries the host and the client
+    // underneath it from the 1200px step.
+    .table tbody td:first-child {
+        display: block;
+        margin-bottom: 0.35rem;
+    }
+
+    // Line two: username, visibility and the 2FA chip, spaced by a real gap
+    // rather than by the padding a table cell would have had. Wrapped in a
+    // flow of inline boxes so an em dash placeholder costs nothing.
+    .table tbody td:nth-child(2),
+    .table tbody td:nth-child(4),
+    .table tbody td:nth-child(5) {
+        margin-right: 0.6rem;
+        color: var(--v-muted);
+        font-size: 0.8rem;
+    }
+
+    // The actions get a line of their own: five 29px buttons plus their gaps is
+    // 165px, which is half the width of the glass and would push the facts
+    // beside them down to nothing.
+    .table tbody td.actionsCell {
+        display: block;
+        margin-top: 0.5rem;
+    }
+
+    // Fitted mode pins every row to a single 58px band so the page size is
+    // arithmetic (see `.tableWrapFitted` above). A two-line card does not fit
+    // in 58px and would be clipped mid-row, so the pin comes off here and the
+    // list scrolls instead. The pager still works; it just no longer gets a
+    // whole number of rows, which is a trade a phone was never going to win.
+    .tableWrapFitted {
+        overflow-y: auto;
+
+        tbody tr,
+        tbody td {
+            height: auto;
+            max-height: none;
+            white-space: normal;
+        }
+    }
+}
+
+// The ⌘K quick-search popover's rows, at the same width and for the same
+// reason. `.rows > .row` and not `.row`, because the geometry above is stated
+// at 0,2,0 precisely so a host cannot outrank it — and a 0,1,0 override in
+// here would not outrank it either.
+@media (max-width: 640px) {
+    .rows > .row {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 0.4rem;
+    }
+
+    // Hard left on the second line rather than flush right against an edge the
+    // title no longer reaches: the cluster now starts under the title it
+    // belongs to, which is what keeps the pairing readable once they are two
+    // lines rather than one.
+    .rowActions {
+        justify-self: start;
+        margin-left: 0;
+        flex-wrap: wrap;
+    }
+}
+
 // ---------------------------------------------------------------------------
 // Access log
 // ---------------------------------------------------------------------------

package/src/components/styles/density.css

@@ -83,3 +83,13 @@
 :root[data-density='large'] body.tablet-mode {
     --grid-checkbox-col-width: 80px;
 }
+
+/* And again for a coarse primary pointer, which switches the grid into the
+   same tablet geometry with no view config — see utils/useDensity.js, which
+   ORs the two signals for the JS half. Restated rather than shared: this is
+   plain CSS, so a class and a media query cannot be one selector. */
+@media (pointer: coarse) {
+    :root[data-density='large'] body {
+        --grid-checkbox-col-width: 80px;
+    }
+}

package/src/components/styles/global-datagrid.css

@@ -103,6 +103,41 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     -webkit-line-clamp: 2 !important;
 }
 
+/* The same three rules again for a COARSE PRIMARY POINTER, which now switches
+   the grid into its fixed-row-height geometry on its own — see the long note
+   in utils/useDensity.js. A phone or a tablet gets the roomy rows and the 44px
+   targets with no view config at all; the `body.tablet-mode` class above still
+   works and now means "treat this view as touch even on a mouse".
+ *
+ * Restated rather than folded into a shared selector list, because this is
+ * plain CSS with no mixins and a `:is()` across a class and a media query is
+ * not a thing that exists. Keep the two halves in step — they are one rule.
+ * `pointer` reports the PRIMARY device, so a touchscreen laptop answers `fine`
+ * and never reaches any of this. */
+@media (pointer: coarse) {
+    .InovuaReactDataGrid__cell.cell-word-wrap,
+    .InovuaReactDataGrid__cell.cell-word-wrap > *,
+    .InovuaReactDataGrid__cell.cell-word-wrap div,
+    .InovuaReactDataGrid__cell.cell-word-wrap span {
+        overflow: hidden !important;
+        max-height: 100% !important;
+    }
+
+    .InovuaReactDataGrid__cell.cell-word-wrap:not(
+            .InovuaReactDataGrid__cell--no-padding
+        ) {
+        height: 100% !important;
+        align-items: center !important;
+        padding: var(--grid-cell-padding, 6px 8px) !important;
+    }
+
+    .InovuaReactDataGrid__cell.cell-word-wrap > div {
+        display: -webkit-box !important;
+        -webkit-box-orient: vertical !important;
+        -webkit-line-clamp: 2 !important;
+    }
+}
+
 /* Default cell behavior - no word wrap */
 .InovuaReactDataGrid__cell:not(.cell-word-wrap) {
     white-space: nowrap !important;
@@ -853,6 +888,34 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     padding-inline-end: 0 !important;
 }
 
+/* The filter row under a finger — as far as it can honestly go, which is not
+   44px.
+ *
+ * The datagrid measures its own header height in JS from the theme, which pins
+ * the filter cell to `min-height: 32px`. A 44px control inside that cell is
+ * CLIPPED, not accommodated: the grid does not re-measure because a stylesheet
+ * grew one of its children. So the touch step here is 32px — the full height
+ * of the cell the theme already reserves, up from 28 — which at least makes
+ * the whole cell the target instead of a 28px box floating inside it.
+ *
+ * The real 44px targets on a touch device are the pager (DataGrid.module.scss)
+ * and the row action buttons. Filtering a grid on a phone is a typing task
+ * with a keyboard already covering half the screen; it is not the thing this
+ * pass had to rescue. Raising it properly means changing the grid theme's
+ * header height, which moves every desktop grid too. */
+@media (pointer: coarse) {
+    .InovuaReactDataGrid__column-header__filter input,
+    .InovuaReactDataGrid__column-header__filter select {
+        height: 32px !important;
+    }
+
+    .InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box {
+        height: 32px !important;
+        min-height: 32px !important;
+        max-height: 32px !important;
+    }
+}
+
 /* The keyboard highlight in a dropdown's option list — declared by the
    vendored theme, then painted with nothing.
 
@@ -1073,3 +1136,103 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 .visns-native-date-filter__input {
     font-size: 0.75rem !important;
 }
+
+/* ==========================================================================
+   NARROW VIEWPORTS — the pager, which used to be sliced off at the edge
+   --------------------------------------------------------------------------
+   Guarded on `(max-width: 640px)` — the same width `utils/useDensity.js`
+   exports as NARROW_VIEWPORT_QUERY and raises the column floor at. Nothing in
+   this block is reachable above it, so every desktop grid is untouched.
+
+   The pager is not the library's own markup: `pagination` on the datagrid
+   renders the TOOLKIT's toolbar (`.inovua-react-pagination-toolbar`, no grid
+   prefix), and that component measures itself in JS and puts its contents in
+   an internal scroll container with little arrows at each end. On a phone its
+   contents are 714px wide inside a 348px window, so what a reader actually
+   gets is "|< < Page [1] of 236 > >| | R" — the "Results per page" label
+   sheared off mid-word at the screen edge, with the rest behind a scroll
+   affordance nobody recognises as one.
+
+   So the toolbar is made to WRAP instead of scroll. Wrapping keeps every
+   control — the page size combo included — where hiding half of them would
+   have been the easier fix and would have taken the record total off the one
+   screen that cannot show the stat strip and the grid at the same time.
+
+   `!important` throughout because the widths and heights being overridden are
+   INLINE, written by the scroll container's own measuring pass. The arrows go
+   with the scrolling: an overflow affordance for content that no longer
+   overflows is a button that does nothing.
+   ========================================================================== */
+@media (max-width: 640px) {
+    .inovua-react-pagination-toolbar {
+        height: auto !important;
+        min-height: 0 !important;
+    }
+
+    .inovua-react-pagination-toolbar
+        .inovua-react-toolkit-toolbar__scroll-container,
+    .inovua-react-pagination-toolbar .inovua-react-scroll-container__wrapper,
+    .inovua-react-pagination-toolbar .inovua-react-scroll-container__scroller,
+    .inovua-react-pagination-toolbar .inovua-react-scroll-container__view {
+        width: 100% !important;
+        max-width: 100% !important;
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+    }
+
+    .inovua-react-pagination-toolbar
+        .inovua-react-toolkit-toolbar__inner-wrapper {
+        flex-wrap: wrap !important;
+        width: 100% !important;
+        row-gap: 0.4rem;
+    }
+
+    /* The two regions and the spacer between them: the spacer is a flex
+       `1 1 auto` that would otherwise push the record count onto a line of its
+       own with a screen's worth of air in front of it. */
+    .inovua-react-pagination-toolbar__region {
+        flex-wrap: wrap !important;
+        width: auto !important;
+        min-width: 0 !important;
+    }
+
+    .inovua-react-pagination-toolbar__spacer {
+        display: none !important;
+    }
+
+    /* The scroll arrows, now that nothing scrolls. */
+    .inovua-react-pagination-toolbar .inovua-react-toolkit-toolbar__arrow {
+        display: none !important;
+    }
+
+    /* ----------------------------------------------------------------------
+       CARD MODE — the cell the stacked row is drawn in.
+
+       `datagrid-card-mode` is on the grid and `datagrid-card-cell` is on the
+       one synthetic column; both are set in DataGrid.jsx. The cell class is
+       what does the work, because THE CHECKBOX COLUMN IS A CELL TOO and still
+       wants the grid's own padding and its centred alignment — a rule scoped
+       to the grid alone would strip both and drop the tick against the edge.
+
+       Everything here is `!important` for the same reason the rules it
+       overrides are: those are `!important` themselves, a few hundred lines
+       up, and were written before this block existed.
+       ---------------------------------------------------------------------- */
+    .datagrid-card-mode .InovuaReactDataGrid__cell.datagrid-card-cell {
+        /* The card owns its own gutters — StackedRow's vertical padding is
+           half the row-height arithmetic in `utils/cardLayout.js`, and two
+           sets of it is how the last line ends up under the row below. */
+        padding: 0 var(--spacing-sm, 0.5rem) !important;
+        /* So `height: 100%` on the row inside resolves against the cell
+           rather than against its own content. */
+        align-items: stretch !important;
+        /* The nowrap/ellipsis clamp on every non-wrapping cell would apply to
+           the card as a whole; each LINE inside sets its own, which is what
+           has to win. */
+        white-space: normal !important;
+        text-overflow: clip !important;
+        /* A divider down the right of a full-width row is a line to nowhere. */
+        border-right: 0 !important;
+    }
+}