@visns-studio/visns-components 6.24.3 → 6.25.0

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;
@@ -765,6 +800,63 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     border-radius: 6px !important;
     background: var(--dgx-surface) !important;
     box-shadow: none !important;
+    /* The vendored theme's padding-top: 2px — inside a hard 28px box it just
+       pushed the text off-centre. */
+    padding-top: 0 !important;
+}
+
+/* A narrow column must TRUNCATE the text, not run it into the arrow.
+
+   The vendored theme declares the placeholder `white-space: nowrap` and gives
+   neither it nor the flex boxes above it any way to shrink: `__value` is
+   allowed to wrap (useless inside a hard 28px height — the second line is
+   just clipped) and the input wrapper keeps its content-size width. So in a
+   column narrower than the text, "ALL OPTIONS" kept its full width and the
+   toggle arrow was painted on top of its tail.
+
+   `min-width: 0` at each flex level is what lets the text box actually give
+   up width; the ellipsis then says so honestly. The arrow is pinned
+   unshrinkable on the other side — a dropdown with no visible handle stops
+   looking like a dropdown.
+
+   The vendored 27px min-heights on `__value`/`__tools` also go: inside the
+   26px content box of the bordered 28px field they forced a 1px overflow that
+   read as the text sitting low. */
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__value {
+    flex-wrap: nowrap !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    height: 100% !important;
+    overflow: hidden !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__input__wrapper {
+    min-width: 0 !important;
+    overflow: hidden !important;
+    margin-bottom: 0 !important;
+    /* The vendored --ltr theme rule pads THIS wrapper 8px left as well as the
+       display value — stacked on the spans' own inset that made 16px. The
+       spans carry the one true inset; the wrapper carries none. */
+    padding: 0 !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__input__placeholder,
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__value__display-value {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+}
+
+.InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
+    .inovua-react-toolkit-combo-box__tools {
+    flex: 0 0 auto !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    align-items: center !important;
 }
 
 .InovuaReactDataGrid__column-header__filter.inovua-react-toolkit-combo-box
@@ -796,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.
 
@@ -1016,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;
+    }
+}

package/src/components/styles/global.css

@@ -314,6 +314,26 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     }
 }
 
+/* THE DROPDOWN ARROW, restored. The rule further up gives `select` its
+   chevron and strips the native chrome (`appearance: none`), and then the
+   chained rule above this comment writes `background: white` — a SHORTHAND,
+   which resets background-image along with the colour. Net result shipped
+   for months: every native select rendered as a plain box visually identical
+   to a text input, with nothing saying "this opens".
+
+   This sits AFTER the chained rule so source order wins at equal
+   specificity, states only the longhands the shorthand clobbered, and
+   positions the chevron inside the field (the original hugged the raw right
+   edge) with the padding to keep long option text from running under it. */
+select {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+);
+    background-repeat: no-repeat;
+    background-position: right 0.65rem center;
+    background-size: 7px 14px;
+    padding-right: 2rem;
+    cursor: pointer;
+}
+
 /* A textarea is multi-line by definition, so it is the one control that opts
    out of the fixed height — it keeps the font and the horizontal padding, and
    takes the vertical padding that puts its FIRST row on the same line as the

package/src/components/tickets/TicketConversation.jsx

@@ -119,6 +119,19 @@ const TicketConversation = ({
         <div className={styles.wrap}>
             {ticket && <TicketHeader ticket={ticket} counts={counts} />}
 
+            {/* The composer sits ABOVE the thread, and a posted reply is
+                PREPENDED: the server answers newest-first now, so the top of
+                the list is where the conversation currently is — writing
+                happens beside the message being answered, not three scrolls
+                below it under the original request. */}
+            {canReply && (
+                <Composer
+                    base={base}
+                    ticketId={ticketId}
+                    onPosted={(entry) => setEntries((prev) => [entry, ...prev])}
+                />
+            )}
+
             {entries.length === 0 ? (
                 <p className={styles.state}>
                     Nothing has been said on this ticket yet.
@@ -130,14 +143,6 @@ const TicketConversation = ({
                     ))}
                 </ol>
             )}
-
-            {canReply && (
-                <Composer
-                    base={base}
-                    ticketId={ticketId}
-                    onPosted={(entry) => setEntries((prev) => [...prev, entry])}
-                />
-            )}
         </div>
     );
 };

package/src/components/utils/ConfirmDialog.js

@@ -42,9 +42,28 @@ export const confirmDialog = (options) => {
         data = null, // Optional data object from the selected row
     } = options;
 
-    // Find Yes and No buttons if they exist
-    const yesButton = buttons.find((btn) => btn.label === 'Yes');
-    const noButton = buttons.find((btn) => btn.label === 'No');
+    /*
+     * WHICH BUTTON CONFIRMS IS NOT A LABEL LOOKUP ANY MORE.
+     *
+     * This used to find the confirm handler with `label === 'Yes'` and
+     * nothing else — so a dialog whose button said "Delete" rendered
+     * perfectly, showed a default "Yes" button, and ran NOTHING when it was
+     * pressed. Two real screens shipped in that state (ticket delete,
+     * customer delete): the reader confirmed a deletion and the app silently
+     * did not delete, which is the worst available failure — no error, no
+     * effect, no clue. App code even grew comments warning that every
+     * confirm button must be labelled "Yes".
+     *
+     * Now: "No" or "Cancel" (either case) is the cancel button; the FIRST
+     * button that is neither is the confirm, whatever it says — "Yes",
+     * "Delete", "Remove from this project". Its label is what the reader
+     * sees, which is how a destructive dialog should read anyway.
+     */
+    const isCancelLabel = (label) =>
+        typeof label === 'string' && ['no', 'cancel'].includes(label.toLowerCase());
+
+    const yesButton = buttons.find((btn) => !isCancelLabel(btn.label));
+    const noButton = buttons.find((btn) => isCancelLabel(btn.label));
 
     // Default button text
     const confirmButtonText = yesButton ? yesButton.label : 'Yes';