@visns-studio/visns-components 6.5.5 → 6.6.0

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.5.5",
+    "version": "6.6.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -43,6 +43,7 @@ import NativeDateFilterEditor from './columns/NativeDateFilterEditor';
 import { toast } from 'react-toastify';
 import fetchUtil from '../utils/fetchUtil';
 import { confirmDialog } from './utils/ConfirmDialog';
+import { useDensity } from './utils/useDensity';
 import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../utils/relationshipSortingUtils';
 import {
     extractColumnsMetadata,
@@ -923,31 +924,19 @@ const DataGrid = forwardRef(
             };
         }, []);
 
-        // Track body.tablet-mode so we can fix rowHeight in tablet views.
-        // With rowHeight={null} Inovua measures each row's content, which is
+        // The px geometry this grid lays out with — row heights, the width one
+        // action icon needs, the floor under a column — comes from the density
+        // table rather than from constants here, so app density (data-density
+        // on <html>) and per-view tablet mode (body.tablet-mode) are decided in
+        // one place. `grid` is a stable reference out of DENSITY_GRID, so it is
+        // safe in the dependency arrays below.
+        //
+        // Why a fixed rowHeight matters in the roomier modes: with
+        // rowHeight={null} Inovua measures each row's content, which is
         // unreliable after auto-refresh on an idle tab (background-throttled
-        // rAF/timers). A fixed height in tablet-mode bypasses measurement
-        // entirely and prevents action buttons from being clipped.
-        const [isTabletMode, setIsTabletMode] = useState(() =>
-            typeof document !== 'undefined' &&
-            document.body.classList.contains('tablet-mode')
-        );
-        useEffect(() => {
-            if (typeof document === 'undefined') {
-                return undefined;
-            }
-            const sync = () =>
-                setIsTabletMode(
-                    document.body.classList.contains('tablet-mode')
-                );
-            sync();
-            const observer = new MutationObserver(sync);
-            observer.observe(document.body, {
-                attributes: true,
-                attributeFilter: ['class'],
-            });
-            return () => observer.disconnect();
-        }, []);
+        // rAF/timers). A fixed height bypasses measurement entirely and
+        // prevents action buttons from being clipped.
+        const { grid } = useDensity();
 
         // Effect to handle autoRefresh setting
         useEffect(() => {
@@ -3613,14 +3602,11 @@ const DataGrid = forwardRef(
                             .filter((entry) => !isRowActionConfig(entry))
                     );
 
-                    // Width to fit N action icons: tablet-mode icons have a larger
-                    // tap target/margin (~44px) than the default (~34px), plus cell
+                    // Width to fit N action icons: roomier densities give icons a
+                    // larger tap target/margin than the default, plus cell
                     // padding. Used by both action columns and the trailing column.
                     const actionColumnWidthFor = (count) =>
-                        Math.max(
-                            100,
-                            count * (isTabletMode ? 44 : 34) + 16
-                        );
+                        Math.max(100, count * grid.actionColUnit + 16);
 
                     const renderColumn = (column) => {
                         let childValue;
@@ -3652,7 +3638,7 @@ const DataGrid = forwardRef(
                             // clamped columns exceed the container (narrow
                             // screens) — columns then render a few px wide
                             // with no horizontal scrollbar ever appearing.
-                            minWidth: column.minWidth ?? 80,
+                            minWidth: column.minWidth ?? grid.columnMinWidth,
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,
                             textVerticalAlign:
@@ -3822,9 +3808,7 @@ const DataGrid = forwardRef(
                                 // what the icons themselves need — tap targets
                                 // stay intact in tablet mode.
                                 const iconsNeed =
-                                    actionCount *
-                                        (isTabletMode ? 44 : 34) +
-                                    16;
+                                    actionCount * grid.actionColUnit + 16;
                                 const width =
                                     column.maxWidth != null
                                         ? Math.max(
@@ -4757,7 +4741,7 @@ const DataGrid = forwardRef(
                 .catch((error) => {
                     console.error('Error in fetching dropdown data: ', error);
                 });
-        }, [columns, filterDataSource, memoizedSettings, isTabletMode]);
+        }, [columns, filterDataSource, memoizedSettings, grid]);
 
         // Force re-render when filterDataSource updates to ensure dropdown filters get their data
         const [renderKey, setRenderKey] = useState(0);
@@ -4886,13 +4870,16 @@ const DataGrid = forwardRef(
             } else if (ajaxSetting?.take >= 35) {
                 setLimit(ajaxSetting.take);
             } else {
+                // Divide by the row height actually in force. This was
+                // hardcoded to 32 even in tablet mode, so tablet pages asked
+                // for far more rows than could ever fit on screen.
                 const calculateRows = (height) =>
-                    Math.floor((height - 100) / 32);
+                    Math.floor((height - 100) / grid.rowUnit);
 
                 const rowCount = calculateRows(minHeight);
                 setLimit(rowCount);
             }
-        }, [dataCount, gridHeight, window.innerHeight, userProfile?.rows_per_page, userProfile?.settings?.rows_per_page]);
+        }, [dataCount, gridHeight, window.innerHeight, grid, userProfile?.rows_per_page, userProfile?.settings?.rows_per_page]);
 
         useEffect(() => {
             const debouncedHandleResize = debounce(() => {
@@ -5578,7 +5565,7 @@ const DataGrid = forwardRef(
                             }
                             headerProps={headerProps}
                             idProperty="id"
-                            minRowHeight={isTabletMode ? 52 : 32}
+                            minRowHeight={grid.minRowHeight}
                             onFilterValueChange={(fv) => {
                                 handleFilterChange(fv, filterValue);
                             }}
@@ -5590,7 +5577,12 @@ const DataGrid = forwardRef(
                             renderRowContextMenu={renderRowContextMenu}
                             renderColumnContextMenu={renderColumnContextMenu}
                             rowClassName={rowClassName}
-                            rowHeight={isTabletMode ? 52 : null}
+                            // null lets the grid measure each row; a number
+                            // fixes the height, which the roomier densities
+                            // need — measurement is unreliable in a
+                            // background-throttled tab and clips action
+                            // buttons. See the density table in useDensity.
+                            rowHeight={grid.rowHeight}
                             rowStyle={getRowStyle}
                             selected={selected}
                             showZebraRows={true}
@@ -5616,15 +5608,36 @@ const DataGrid = forwardRef(
                                     ? 'InovuaReactDataGrid--grouped datagrid-with-grouping datagrid-fixed-group-headers'
                                     : 'datagrid-without-grouping'
                             }
-                            checkboxColumnProps={{
-                                width: 60,
-                                minWidth: 60,
-                                maxWidth: 60,
+                            // The real prop is `checkboxColumn` (bool | column
+                            // object) — {...tableSetting} spreads the view's
+                            // `checkboxColumn: true` and this object, placed
+                            // after the spread, replaces it. It previously sat
+                            // on a prop named `checkboxColumnProps`, which no
+                            // version of the datagrid has ever read: the grid
+                            // fell back to its internal 40px default column and
+                            // the custom select-all header below never
+                            // rendered.
+                            checkboxColumn={
+                                tableSetting?.checkboxColumn
+                                    ? {
+                                // The ?? 60 is a backstop, not a second
+                                // source of truth: if the density table ever
+                                // fails to supply a width (a stale-HMR module
+                                // mix did exactly that once), the grid would
+                                // otherwise fall back to its internal 40px
+                                // default and clip the checkbox.
+                                width: grid.checkboxColWidth ?? 60,
+                                minWidth: grid.checkboxColWidth ?? 60,
+                                maxWidth: grid.checkboxColWidth ?? 60,
                                 resizable: false,
                                 sortable: false,
                                 headerAlign: 'center',
                                 textAlign: 'center',
-                                renderHeader: () => {
+                                // `header`, not `renderHeader`: the column
+                                // merge is {...default, ...this}, and the
+                                // default supplies its select-all through
+                                // `header` — this key must shadow that one.
+                                header: () => {
                                     // Custom header checkbox that works with grouped data
                                     const allRowsSelected =
                                         dataRef.current &&
@@ -5649,7 +5662,12 @@ const DataGrid = forwardRef(
                                     return (
                                         <input
                                             type="checkbox"
-                                            checked={allRowsSelected}
+                                            // Boolean() — the && chain yields
+                                            // undefined before data arrives,
+                                            // which React reads as
+                                            // "uncontrolled" and then warns
+                                            // when it flips to controlled.
+                                            checked={Boolean(allRowsSelected)}
                                             ref={(checkbox) => {
                                                 if (checkbox) {
                                                     checkbox.indeterminate =
@@ -5695,8 +5713,11 @@ const DataGrid = forwardRef(
                                                 }
                                             }}
                                             style={{
-                                                width: '20px',
-                                                height: '20px',
+                                                // rem so it rides the density
+                                                // root: 20px default, 22.5px
+                                                // in large.
+                                                width: '1.25rem',
+                                                height: '1.25rem',
                                                 cursor: 'pointer',
                                                 accentColor:
                                                     'var(--primary-color, #3b82f6)',
@@ -5704,7 +5725,9 @@ const DataGrid = forwardRef(
                                         />
                                     );
                                 },
-                            }}
+                            }
+                                    : undefined
+                            }
                             checkboxOnlyRowSelect={true}
                         />
                     ) : null}

package/src/components/generic/GenericAuth.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useInsertionEffect } from 'react';
 import {
     useNavigate,
     useLocation,
@@ -128,6 +128,7 @@ const GenericAuth = ({
     enforce2FA = false, // Default to not enforcing 2FA
     clientPortalConfig = null, // Configuration for client portal with component and URLs
     config = {}, // Configuration object for auth features
+    density = 'default', // 'default' | 'large' — app-wide display density
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -138,6 +139,26 @@ const GenericAuth = ({
     const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [isClientAuthenticated, setIsClientAuthenticated] = useState(false);
 
+    // Mirror the `density` prop onto <html> as data-density, which is what
+    // styles/density.css keys off. 'default' writes nothing, so an app that
+    // never passes the prop leaves no attribute and matches no rule.
+    // useInsertionEffect fires before child useLayoutEffects, so the root
+    // font-size is in place before anything downstream (the DataGrid most of
+    // all) measures itself against it.
+    useInsertionEffect(() => {
+        if (
+            typeof document === 'undefined' ||
+            !density ||
+            density === 'default'
+        ) {
+            return undefined;
+        }
+        document.documentElement.setAttribute('data-density', density);
+        return () => {
+            document.documentElement.removeAttribute('data-density');
+        };
+    }, [density]);
+
     const updateAuthStatus = async () => {
         // The loading curtain covers two moments and stays down for neither
         // more nor less: the first profile check of a page load (no usable
@@ -390,6 +411,7 @@ const GenericAuth = ({
                                 themeType={themeType}
                                 userProfile={userProfile}
                                 enforce2FA={enforce2FA}
+                                density={density}
                             />
                         }
                     />

package/src/components/generic/GenericIndex.jsx

@@ -16,6 +16,7 @@ import TableFilter from '../TableFilter';
 import GenericGrid from './GenericGrid';
 import GenericReportForm from './GenericReportForm';
 import StandardModal from './StandardModal';
+import { useDensity, useAvailableHeight } from '../utils/useDensity';
 
 import styles from '../styles/GenericIndex.module.scss';
 
@@ -302,6 +303,23 @@ function GenericIndex({
     const [customActionConfig, setCustomActionConfig] = useState(null);
     const { windowHeight, windowWidth } = useWindowDimensions();
 
+    // Grid height. The long-standing behaviour is a flat 80% of the viewport,
+    // which leaves a dead band below the table; at large density the screen is
+    // the point, so measure what is actually left below the grid instead.
+    // `useAvailableHeight` returns null until it can measure (and always when
+    // disabled), so the 80% rule stays the fallback and remains exactly what
+    // every non-density app gets.
+    const { isLarge } = useDensity();
+    const gridWrapperRef = useRef(null);
+    const measuredGridHeight = useAvailableHeight(gridWrapperRef, {
+        enabled: isLarge,
+        recomputeKey: windowHeight,
+    });
+    const gridHeight =
+        isLarge && measuredGridHeight != null
+            ? measuredGridHeight
+            : windowHeight * 0.8;
+
     // Toggle a body-level "tablet-mode" class when this view opts in via
     // setting.tabletMode. Lets consumer projects style the whole UI
     // (including app-level chrome) for tablet use without touching this lib.
@@ -663,12 +681,12 @@ function GenericIndex({
                 style: config.style || userProfile?.settings?.style || {},
             };
 
-            return (
+            const table = (
                 <Table
                     {...configWithStyle}
                     ref={gridRef}
                     hoverColor={configWithStyle.style?.hoverColor}
-                    gridHeight={windowHeight * 0.8}
+                    gridHeight={gridHeight}
                     setConfig={setConfig}
                     setTableData={setTableData}
                     setTotal={setTotal}
@@ -677,6 +695,19 @@ function GenericIndex({
                     userProfile={userProfile}
                 />
             );
+
+            // The measuring wrapper only exists in large density — every other
+            // app renders the exact tree it always has.
+            return isLarge ? (
+                <div
+                    ref={gridWrapperRef}
+                    style={{ flex: '1 1 auto', minHeight: 0 }}
+                >
+                    {table}
+                </div>
+            ) : (
+                table
+            );
         };
 
         if (subnav) {
@@ -693,7 +724,8 @@ function GenericIndex({
     }, [
         config,
         subnav,
-        windowHeight,
+        gridHeight,
+        isLarge,
         userProfile,
         setConfig,
         setTotal,

package/src/components/generic/GenericMain.jsx

@@ -1,3 +1,7 @@
+// Density first: its `:root[data-density='large']` block is inert until the
+// app opts in via GenericAuth's `density` prop, but the root font-size it
+// sets is what every rem in the stylesheets below resolves against.
+import '../styles/density.css';
 import '../styles/global.css';
 
 import React, { useState, useEffect, useCallback } from 'react';
@@ -27,6 +31,10 @@ const GenericMain = ({
     themeType,
     userProfile,
     enforce2FA = false, // Default to not enforcing 2FA
+    // Accepted so density is part of the main-layout interface too; the
+    // attribute that actually drives the CSS is written by GenericAuth, and
+    // nothing in here reads the value yet.
+    density = 'default',
 }) => {
     const navigate = useNavigate();
     const location = useLocation();

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

@@ -690,7 +690,7 @@
 }
 
 .searchInput {
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     border-radius: 0;
     border: none;
     padding: 0 10px 0 50px;
@@ -722,7 +722,7 @@
     display: inline-flex;
     align-items: center;
     padding: 0 15px;
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     background-color: #f9fafb;
     border: 1px solid #d1d5db;
     margin-bottom: 0;
@@ -734,7 +734,7 @@
     display: inline-flex;
     align-items: center;
     padding: 0 15px;
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     background-color: #f9fafb;
     border: 1px solid #d1d5db;
     border-radius: var(--br, 4px);
@@ -771,11 +771,11 @@
 .actionButtons {
     display: flex;
     align-items: center;
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     gap: 0;
 
     > .btn {
-        height: 38px;
+        height: var(--grid-toolbar-height, 38px);
         border-radius: 0;
         display: flex;
         align-items: center;
@@ -799,11 +799,11 @@
 .actionButtonsStandalone {
     display: flex;
     align-items: center;
-    height: 38px;
+    height: var(--grid-toolbar-height, 38px);
     gap: 0;
 
     > .btn {
-        height: 38px;
+        height: var(--grid-toolbar-height, 38px);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -884,7 +884,7 @@
         justify-content: flex-start;
         margin-bottom: 0;
         width: 100%;
-        height: 38px;
+        height: var(--grid-toolbar-height, 38px);
         position: relative;
         border: 1px solid #d1d5db;
         border-bottom: none;
@@ -906,7 +906,7 @@
         }
 
         input {
-            height: 38px;
+            height: var(--grid-toolbar-height, 38px);
             border-radius: 0;
             border: none;
             padding: 0 10px 0 50px;
@@ -930,14 +930,14 @@
 
         .filterAction--alt {
             position: relative;
-            height: 38px;
+            height: var(--grid-toolbar-height, 38px);
             z-index: 5;
             display: flex;
             gap: 0;
             /* margin-left is now controlled in the component */
 
             > .btn {
-                height: 38px;
+                height: var(--grid-toolbar-height, 38px);
                 border-radius: 0;
                 display: flex;
                 align-items: center;

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

@@ -960,7 +960,7 @@ input[type='file']:hover {
     border-radius: var(--br, 6px);
     font-size: 0.8rem;
     transition: all 0.2s ease;
-    min-height: 36px;
+    min-height: var(--field-pocket-size, 36px);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     position: relative;
     overflow: hidden;
@@ -997,8 +997,8 @@ input[type='file']:hover {
     padding: 0.35em;
     border-radius: 4px;
     transition: all 0.2s ease;
-    min-width: 28px;
-    height: 28px;
+    min-width: var(--field-pocket-size-sm, 28px);
+    height: var(--field-pocket-size-sm, 28px);
     flex-shrink: 0;
 }
 
@@ -1151,7 +1151,7 @@ input[type='file']:hover {
     transition: all 0.2s ease;
     margin-bottom: 0.25em;
     border: 1px solid transparent;
-    min-height: 36px;
+    min-height: var(--field-pocket-size, 36px);
 }
 
 .file-list-item-image {
@@ -1370,7 +1370,7 @@ input[type='file']:hover {
     z-index: 999; /* Match react-select z-index */
     max-height: 200px;
     overflow-y: auto;
-    font-size: 14px; /* Match react-select font size */
+    font-size: var(--field-suggestion-font-size, 14px); /* Match react-select font size */
 }
 
 .emailSuggestion {

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

@@ -260,7 +260,7 @@
        close under its heading and the whole block is separated from the
        content below rather than floating between the two. */
     margin: calc(-1 * var(--spacing-sm, 0.5rem)) 0 var(--spacing-lg, 1.5rem);
-    max-width: 70ch;
+    max-width: var(--detail-prose-width, 70ch);
     font-size: var(--font-size-sm, 0.8125rem);
     line-height: 1.55;
     color: var(--muted-color, #6e7276);
@@ -765,6 +765,9 @@
         display: flex;
         align-items: center;
         min-width: 0;
+        /* Flex drops whitespace-only text nodes — same fix as the index
+           header: one word-space back between title fragments. */
+        column-gap: 0.3em;
     }
 
     /* The parent crumb. Same size and baseline as the entity it leads to, so
@@ -877,7 +880,7 @@
     background: #f9f9f9; /* Subtle background to match the theme */
     border: 1px solid #ddd; /* Light border for structure */
     border-radius: 6px; /* Slight rounding for a modern feel */
-    max-width: 600px; /* Constrain width for a balanced layout */
+    max-width: var(--detail-panel-max-width, 600px); /* Constrain width for a balanced layout */
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Gentle shadow for depth */
     font-style: italic; /* Optional: Add a subtle font style */
 }
@@ -1078,7 +1081,7 @@
 
 .modalWide {
     width: 90vw;
-    max-width: 1400px;
+    max-width: var(--detail-max-width, 1400px);
     min-width: 600px;
 }
 

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

@@ -501,7 +501,9 @@
     background-color: transparent;
     color: var(--paragraph-color, #212529);
     border: 1px solid rgba(var(--paragraph-color-rgb, 33, 37, 41), 0.2);
-    height: 30px;
+    /* Fixed height, so the density hook has to reach it directly — this is
+       the one filter-bar control button-base doesn't size. */
+    height: var(--control-height-sm, 30px);
 
     svg {
         margin-right: 4px;
@@ -818,6 +820,11 @@
         display: flex;
         align-items: center;
         min-width: 0;
+        /* Flex drops whitespace-only text nodes, so a title written as
+           `Forklift <span>(warning)</span>` rendered with the two parts
+           jammed together. One word-space back between fragments; a title
+           that is a single text node has one flex item and no gap. */
+        column-gap: 0.3em;
     }
 
     /* A breadcrumb crumb: still a link, but it should not compete with the
@@ -1177,7 +1184,7 @@
 
 .modalWide {
     width: 90vw;
-    max-width: 1400px;
+    max-width: var(--detail-max-width, 1400px);
     min-width: 600px;
 }
 

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

@@ -1,3 +1,56 @@
+/* ============================================================================
+   Density hooks (page, controls, grid, fields, detail)
+   ----------------------------------------------------------------------------
+   The second half of the set documented at the top of Navigation.module.scss,
+   written the same way: every declaration carrying one of these reads
+   `var(--hook, <the value it always had>)`, so a project that sets none of them
+   renders byte-identically to before. They exist for the density system — an
+   app overrides them on `:root` in its own global stylesheet to tighten (or
+   loosen) the whole UI without forking a component.
+
+   Page shell — this file
+     --page-gutter-y          vertical padding of the content gutter
+                              (`.padding` / `.paddingSimple`).
+                                                   default: var(--spacing-lg)
+     --page-gutter-x          horizontal padding of the same.
+                       default: clamp(var(--spacing-md), 3vw, var(--spacing-xl))
+     --page-gutter-narrow     the flat gutter used below 960px, both axes.
+                                                   default: var(--spacing-md)
+     --page-max-width         cap on the content column's width. default: 2200px
+     --content-header-height  the page's own content-header band. default: 52.5px
+
+   Controls — _controls.scss
+     --control-height         min-height of every button (`button-base`) and
+                              input (`input-base`).             default: 2.5rem
+     --control-height-sm      min-height of the small button variant.
+                                                                default: 2rem
+     --input-padding-x        horizontal padding inside an input. default: 0.65rem
+
+   Data grid — DataGrid.module.scss, global-datagrid.css
+     --grid-toolbar-height    height of the toolbar / search strip and the
+                              buttons sitting in it (11 declarations).
+                                                                default: 38px
+     --grid-cell-padding      padding inside a grid body cell.  default: 6px 8px
+     --grid-checkbox-col-width width of the row-select checkbox column, held
+                              in step with checkboxColWidth in
+                              utils/useDensity.js.              default: 60px
+
+   Fields — Field.module.scss
+     --field-pocket-size      min-height of a file-list row.    default: 36px
+     --field-pocket-size-sm   the square trash chip on that row. default: 28px
+     --field-suggestion-font-size type size of the email-suggestion list
+                              (kept in step with react-select).  default: 14px
+
+   Detail / index — GenericDetail.module.scss, GenericIndex.module.scss
+     --detail-max-width       cap on the wide modal, shared by both files so the
+                              two surfaces stay the same width. default: 1400px
+     --detail-prose-width     measure of a description paragraph. default: 70ch
+     --detail-panel-max-width cap on the centred empty-state panel. default: 600px
+
+   Nav-bar hooks (`--nav-*`, including `--nav-logo-height`) are documented at
+   the top of Navigation.module.scss and are not repeated here.
+   ========================================================================= */
+
 .header {
     background: var(--primary-color);
     color: var(--primary-color);
@@ -36,7 +89,7 @@
         border-bottom: 1px solid rgba(0, 0, 0, 0.14);
         box-sizing: border-box;
         padding: 1em;
-        height: 52.5px;
+        height: var(--content-header-height, 52.5px);
         box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.5);
         display: flex;
         flex-wrap: nowrap;
@@ -94,13 +147,13 @@
    and on a phone gave the same gutter as a desktop. */
 .padding,
 .paddingSimple {
-    padding: var(--spacing-lg) clamp(var(--spacing-md), 3vw, var(--spacing-xl));
+    padding: var(--page-gutter-y, var(--spacing-lg)) var(--page-gutter-x, clamp(var(--spacing-md), 3vw, var(--spacing-xl)));
     /* Long lines of data are hard to track across an ultrawide screen. This
        is generous enough never to bite on a laptop. */
-    max-width: 2200px;
+    max-width: var(--page-max-width, 2200px);
     margin: 0 auto;
 
     @media (max-width: 960px) {
-        padding: var(--spacing-md) var(--spacing-md);
+        padding: var(--page-gutter-narrow, var(--spacing-md)) var(--page-gutter-narrow, var(--spacing-md));
     }
 }