@visns-studio/visns-components 6.24.3 → 6.25.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;
+    }
+}