@agilant/toga-blox 1.0.319-beta.78 → 1.0.319-beta.80

package/dist/components/SideNav/SideNav.module.css

@@ -202,7 +202,6 @@
   justify-content: flex-start;
   align-items: center;
   gap: var(--sideNav-navigationItem-gap);
-  padding: var(--sideNav-navigationItem-padding);
   border-radius: var(--sideNav-navigationItem-border-radius);
 
   &:hover {
@@ -217,14 +216,14 @@
     background: var(--sideNav-navigationItem-bg-active);
   }
 
-  /* link that's next to the icon within each nav item */
+  /* actual link */
   .navigationItemLink {
     width: 100%;
     height: fit-content;
-    padding: 0;
     background: transparent;
     color: inherit;
     place-content: start;
+    padding: var(--sideNav-navigationItem-padding);
 
     &:hover,
     &:focus,

package/dist/components/Table/themeConfig/toga.module.css

@@ -208,7 +208,7 @@
 	color: var(--primaryTable-header-text-default);
 	box-shadow: inset 0 -1px 0 var(--primaryTable-border-default);
 	text-wrap: nowrap;
-	padding: 12px 16px;
+	padding: 10px 16px;
 	font-size: var(--primaryTable-header-fontSize-default);
 	font-weight: var(--primaryTable-header-fontWeight-default);
 }
@@ -219,7 +219,7 @@
 }
 .headerCell.supply-nested {
 	text-transform: none;
-	padding: 8px 12px;
+	padding: 10px 16px;
 	font-size: var(--primaryTable-header-fontSize-default);
 }
 
@@ -386,13 +386,13 @@
 }
 .bodyCell.supply,
 .bodyCell.supply-modal-table {
-	padding: 8px 12px;
+	padding: 10px 16px;
 }
 .bodyCell.supply-nested {
-	padding: 8px 12px;
+	padding: 10px 16px;
 }
 .bodyCell.desk {
-	padding: 8px 12px;
+	padding: 10px 16px;
 }
 
 /* ── Table wrapper ───────────────────────────────────────────────── */

package/dist/templates/PrimaryTable/PrimaryTable.js

@@ -94,16 +94,15 @@ export const PrimaryTable = (props) => {
     // configured getSize(), losing the content-based sizing (e.g. a long
     // Description column collapsing to the default width).
     //
-    // So we keep auto-layout for the first paint (columns size to content
-    // exactly as before), measure the resulting column widths, then pin
-    // those exact pixel widths via a <colgroup> + table-layout: fixed. The
-    // content-based widths are preserved and frozen, so scrolling can no
-    // longer reflow them. Non-virtualized modal tables render every row, so
-    // they never jitter and stay on plain auto-layout.
-    // Modal tables normally stay on auto-layout (they render every row, so
-    // they never jitter). But resizing needs a measured pixel baseline +
-    // table-layout: fixed, so opt them into freezing when resize is enabled.
-    const shouldFreeze = skin !== "supply-modal-table" || !!resizableColumns || !!shrinkColumns;
+    // So we keep auto-layout for the first paint, measure the natural content
+    // width of each column (header label + controls vs. widest body value),
+    // then pin those exact pixel widths via a <colgroup> + table-layout: fixed.
+    // The content-based widths are preserved and frozen, so scrolling can no
+    // longer reflow them. Non-virtualized modal tables don't jitter, but they
+    // freeze too so they get the same content-fit sizing (and so resize has a
+    // measured pixel baseline) — only an empty table (no rows to measure) stays
+    // on plain auto-layout.
+    const shouldFreeze = true;
     const leafColumnKey = (table?.getAllLeafColumns() ?? [])
         .map((c) => c.id)
         .join("|");
@@ -134,37 +133,51 @@ export const PrimaryTable = (props) => {
         const cells = Array.from(leafRow.children);
         if (cells.length === 0)
             return;
-        const widths = cells.map((c) => c.getBoundingClientRect().width);
-        // Skip a pre-layout pass where the table hasn't been measured yet.
-        if (widths.every((w) => w === 0))
+        // Bail on a pre-layout pass where nothing has been laid out yet.
+        if (cells.every((c) => c.getBoundingClientRect().width === 0))
             return;
-        setFrozenWidths(widths);
-        // Floor each column at its widest *body* cell so the longest value never
-        // truncates — and only the body, not the header. Seeding with the header
-        // would pin header-dominated columns (e.g. a short NUMBER/CURRENCY value
-        // under a longer label like "Qty Fulfilled") to their full header width,
-        // leaving no slack to shrink. So we measure body cells only and let the
-        // header label ellipsize. The header is a per-column fallback used only
-        // where a column has no measurable body content (empty cells / no rows).
-        const bodyFloors = new Array(cells.length).fill(0);
+        // Widest *body* content per column (the full pre-ellipsis width each
+        // value wants). Virtualizer spacer rows have a different cell count and
+        // are skipped.
+        const bodyContent = new Array(cells.length).fill(0);
         const body = head.parentElement?.querySelector("tbody");
         if (body) {
             const bodyRows = Array.from(body.querySelectorAll(":scope > tr"));
             for (const tr of bodyRows) {
                 const tds = Array.from(tr.children);
-                // Skip virtualizer spacer rows — they have no leaf cells.
                 if (tds.length !== cells.length)
                     continue;
                 tds.forEach((td, i) => {
                     const w = measureCellContentWidth(td);
-                    if (w > bodyFloors[i])
-                        bodyFloors[i] = w;
+                    if (w > bodyContent[i])
+                        bodyContent[i] = w;
                 });
             }
         }
-        const floors = cells.map((c, i) => bodyFloors[i] > 0 ? bodyFloors[i] : measureCellContentWidth(c));
+        // Freeze each column to its natural content width = the larger of the
+        // header (its label plus the sort/filter controls) and the widest body
+        // value, so neither the header nor any cell value truncates. This
+        // replaces the old behavior of freezing the rendered cell width, which
+        // was pinned to the configured size/minSize (≥120/≥200) on first paint —
+        // columns now shrink to fit their content instead of a flat floor. A
+        // column with an explicitly assigned width (size === minSize, set from
+        // columnWidths) keeps that exact width.
+        const leafColumns = table?.getAllLeafColumns() ?? [];
+        const widths = cells.map((c, i) => {
+            const def = leafColumns[i]?.columnDef;
+            if (def?.size != null && def.size === def.minSize)
+                return def.size;
+            return Math.max(measureCellContentWidth(c), bodyContent[i]);
+        });
+        setFrozenWidths(widths);
+        // Shrink floor (used only by shrinkColumns): the widest *body* cell so
+        // the longest value never truncates when columns are squeezed to fit a
+        // narrow container, while the header label is allowed to ellipsize. The
+        // header is a per-column fallback used only where a column has no
+        // measurable body content (empty cells / no rows).
+        const floors = cells.map((c, i) => bodyContent[i] > 0 ? bodyContent[i] : measureCellContentWidth(c));
         setContentFloors(floors);
-    }, [shouldFreeze, frozenWidths, rows.length, leafColumnKey]);
+    }, [shouldFreeze, frozenWidths, rows.length, leafColumnKey, table]);
     // ── Shrink-to-fit (modal tables) ────────────────────────────────────
     // When shrinkColumns is on we don't render the table at its frozen
     // content widths; we scale those widths down to the visible container so

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.319-beta.78",
+	"version": "1.0.319-beta.80",
 	"description": "Toga-Blox is a comprehensive and reusable React component library",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",