@homebound/beam 3.18.0 → 3.19.0

package/dist/index.cjs

@@ -195,6 +195,7 @@ __export(index_exports, {
   beamNavbarLayoutHeightVar: () => beamNavbarLayoutHeightVar,
   beamPageHeaderLayoutHeightVar: () => beamPageHeaderLayoutHeightVar,
   beamSideNavLayoutWidthVar: () => beamSideNavLayoutWidthVar,
+  beamTableActionsHeightVar: () => beamTableActionsHeightVar,
   booleanFilter: () => booleanFilter,
   boundCheckboxField: () => boundCheckboxField,
   boundCheckboxGroupField: () => boundCheckboxGroupField,
@@ -213,6 +214,7 @@ __export(index_exports, {
   boundTextField: () => boundTextField,
   boundToggleChipGroupField: () => boundToggleChipGroupField,
   boundTreeSelectField: () => boundTreeSelectField,
+  calcColumnLayout: () => calcColumnLayout,
   calcColumnSizes: () => calcColumnSizes,
   cardStyle: () => cardStyle,
   checkboxFilter: () => checkboxFilter,
@@ -233,6 +235,8 @@ __export(index_exports, {
   defaultRenderFn: () => defaultRenderFn,
   defaultStyle: () => defaultStyle,
   defaultTestId: () => defaultTestId,
+  documentScrollChromeLeft: () => documentScrollChromeLeft,
+  documentScrollChromeWidth: () => documentScrollChromeWidth,
   dragHandleColumn: () => dragHandleColumn,
   emptyCell: () => emptyCell,
   ensureClientSideSortValueIsSortable: () => ensureClientSideSortValueIsSortable,
@@ -287,6 +291,7 @@ __export(index_exports, {
   px: () => px,
   recursivelyGetContainingRow: () => recursivelyGetContainingRow,
   reservedRowKinds: () => reservedRowKinds,
+  resolveTableContentWidth: () => resolveTableContentWidth,
   resolveTooltip: () => resolveTooltip,
   rowClickRenderFn: () => rowClickRenderFn,
   rowLinkRenderFn: () => rowLinkRenderFn,
@@ -301,6 +306,9 @@ __export(index_exports, {
   singleFilter: () => singleFilter,
   sortFn: () => sortFn,
   sortRows: () => sortRows,
+  stickyNavAndHeaderOffset: () => stickyNavAndHeaderOffset,
+  stickyTableHeaderOffset: () => stickyTableHeaderOffset,
+  sumColumnSizesPx: () => sumColumnSizesPx,
   switchFocusStyles: () => switchFocusStyles,
   switchHoverStyles: () => switchHoverStyles,
   switchSelectedHoverStyles: () => switchSelectedHoverStyles,
@@ -6212,9 +6220,19 @@ var beamPageHeaderLayoutHeightVar = "--beam-page-header-layout-height";
 var beamLayoutViewportWidthVar = "--beam-layout-viewport-width";
 var beamLayoutViewportHeightVar = "--beam-layout-viewport-height";
 var beamSideNavLayoutWidthVar = "--beam-side-nav-layout-width";
+var beamTableActionsHeightVar = "--beam-table-actions-height";
+function documentScrollChromeLeft() {
+  return `var(${beamSideNavLayoutWidthVar}, 0px)`;
+}
+function documentScrollChromeWidth() {
+  return `calc(var(${beamLayoutViewportWidthVar}, 100vw) - var(${beamSideNavLayoutWidthVar}, 0px))`;
+}
 function stickyNavAndHeaderOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px))`;
 }
+function stickyTableHeaderOffset(basePx = 0) {
+  return `calc(${basePx}px + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
+}
 
 // src/utils/zIndices.ts
 var zIndices = {
@@ -6223,6 +6241,7 @@ var zIndices = {
   tableExpandableTitle: 20,
   tableStickyColumn: 30,
   tableStickyHeader: 40,
+  tableActions: 45,
   // Page chrome - ensure these items sit above the table
   scrollShadow: 50,
   superDrawerScrim: 50,
@@ -6389,6 +6408,9 @@ function SortHeader(props) {
 // src/components/Table/utils/utils.tsx
 var import_runtime12 = require("@homebound/truss/runtime");
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var __maybeInc4 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column2, isExpandableHeader, isExpandable, minStickyLeftOffset, isKeptSelectedRow) {
   if (isKeptSelectedRow && column2.id === "beamCollapseColumn") {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
@@ -6583,12 +6605,21 @@ function recursivelyGetContainingRow(rowId, rowArray, parent) {
   }
   return void 0;
 }
-function getTableRefWidthStyles(isVirtual) {
-  return {
-    width: "w100",
-    ...isVirtual ? {
+function getTableRefWidthStyles(isVirtual, inDocumentScrollLayout = false) {
+  if (inDocumentScrollLayout) {
+    return {
+      width: ["w_var", {
+        "--width": (0, import_runtime12.maybeCssVar)(__maybeInc4(documentScrollChromeWidth()))
+      }]
+    };
+  }
+  if (isVirtual) {
+    return {
       width: "w_calc_100_20px"
-    } : {}
+    };
+  }
+  return {
+    width: "w100"
   };
 }
 
@@ -7396,7 +7427,7 @@ function ColumnResizeHandle({
 var import_react25 = require("react");
 var import_runtime19 = require("@homebound/truss/runtime");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var __maybeInc4 = (inc) => {
+var __maybeInc5 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function KeptGroupRow(props) {
@@ -7423,7 +7454,7 @@ function KeptGroupRow(props) {
     ...{
       paddingLeft: "pl0",
       width: ["w_var", {
-        "--width": (0, import_runtime19.maybeCssVar)(__maybeInc4(`calc(${columnSizes.join(" + ")})`))
+        "--width": (0, import_runtime19.maybeCssVar)(__maybeInc5(`calc(${columnSizes.join(" + ")})`))
       }]
     }
   }), ...as === "table" ? {
@@ -8232,7 +8263,7 @@ function isZonedDateTime(value) {
 var import_use_debounce2 = require("use-debounce");
 var import_runtime21 = require("@homebound/truss/runtime");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var __maybeInc5 = (inc) => {
+var __maybeInc6 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var __typography2 = {
@@ -8456,12 +8487,12 @@ function RowImpl(props) {
       },
       ...maybeSticky === "left" ? {
         left: ["left_var", {
-          "--left": (0, import_runtime21.maybeCssVar)(__maybeInc5(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
+          "--left": (0, import_runtime21.maybeCssVar)(__maybeInc6(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
         }]
       } : {},
       ...maybeSticky === "right" ? {
         right: ["right_var", {
-          "--right": (0, import_runtime21.maybeCssVar)(__maybeInc5(columnIndex + 1 === columnSizes.length ? 0 : `calc(${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")})`))
+          "--right": (0, import_runtime21.maybeCssVar)(__maybeInc6(columnIndex + 1 === columnSizes.length ? 0 : `calc(${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")})`))
         }]
       } : {}
     } : {};
@@ -8551,7 +8582,7 @@ function RowImpl(props) {
       // If we have a 'levelIndent' defined, then subtract that amount from the first content column's width to ensure all columns will still line up properly.
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime21.maybeCssVar)(__maybeInc5(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
+          "--width": (0, import_runtime21.maybeCssVar)(__maybeInc6(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
         }]
       }
     };
@@ -8648,7 +8679,7 @@ function getFieldWidth(fullWidth) {
 // src/inputs/TextFieldBase.tsx
 var import_runtime23 = require("@homebound/truss/runtime");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var __maybeInc6 = (inc) => {
+var __maybeInc7 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var __typography3 = {
@@ -8822,7 +8853,7 @@ function TextFieldBase(props) {
         } : {},
         ...labelStyle === "left" ? {
           width: ["w_var", {
-            "--width": (0, import_runtime23.maybeCssVar)(__maybeInc6(labelLeftFieldWidth))
+            "--width": (0, import_runtime23.maybeCssVar)(__maybeInc7(labelLeftFieldWidth))
           }]
         } : {}
       },
@@ -8898,7 +8929,7 @@ function TextFieldBase(props) {
         } : {},
         ...labelStyle === "left" ? {
           width: ["w_var", {
-            "--width": (0, import_runtime23.maybeCssVar)(__maybeInc6(labelLeftFieldWidth))
+            "--width": (0, import_runtime23.maybeCssVar)(__maybeInc7(labelLeftFieldWidth))
           }]
         } : {}
       },
@@ -14013,7 +14044,7 @@ var import_react61 = require("react");
 var import_react_aria35 = require("react-aria");
 var import_runtime49 = require("@homebound/truss/runtime");
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var __maybeInc7 = (inc) => {
+var __maybeInc8 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Switch(props) {
@@ -14107,7 +14138,7 @@ function Switch(props) {
     /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ...(0, import_runtime49.trussProps)({
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": (0, import_runtime49.maybeCssVar)(__maybeInc7(labelLeftFieldWidth))
+          "--width": (0, import_runtime49.maybeCssVar)(__maybeInc8(labelLeftFieldWidth))
         }]
       } : {}
     }), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime49.trussProps)({
@@ -14188,7 +14219,7 @@ function switchCircleDefaultStyles(isCompact) {
 function switchCircleSelectedStyles(isCompact) {
   return {
     left: ["left_var", {
-      "--left": (0, import_runtime49.maybeCssVar)(__maybeInc7(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
+      "--left": (0, import_runtime49.maybeCssVar)(__maybeInc8(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
     }]
   };
 }
@@ -14441,7 +14472,7 @@ var import_react_aria39 = require("react-aria");
 var import_react_stately15 = require("react-stately");
 var import_runtime51 = require("@homebound/truss/runtime");
 var import_jsx_runtime78 = require("react/jsx-runtime");
-var __maybeInc8 = (inc) => {
+var __maybeInc9 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function ToggleChipGroup(props) {
@@ -14489,7 +14520,7 @@ function ToggleChipGroup(props) {
       flexWrap: "flexWrap_wrap",
       ...labelStyle === "left" ? {
         width: ["w_var", {
-          "--width": (0, import_runtime51.maybeCssVar)(__maybeInc8(labelLeftFieldWidth))
+          "--width": (0, import_runtime51.maybeCssVar)(__maybeInc9(labelLeftFieldWidth))
         }]
       } : {}
     }), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ToggleChip2, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, readonly: o.readonly, startAdornment: o.startAdornment, xss, ...tid[o.value] }, o.value)) })
@@ -14682,16 +14713,60 @@ function nonKindDefaults() {
 function parseWidthToPx(widthStr, tableWidth) {
   if (!widthStr) return null;
   if (widthStr.endsWith("px")) {
-    const parsed = parseInt(widthStr.replace("px", ""), 10);
+    const parsed = parseFloat(widthStr.replace("px", ""));
     return isNaN(parsed) ? null : parsed;
   }
-  if (widthStr.endsWith("%") && tableWidth) {
+  if (widthStr.endsWith("%") && tableWidth !== void 0) {
     const percent = parseFloat(widthStr.replace("%", ""));
     if (isNaN(percent)) return null;
     return Math.round(percent / 100 * tableWidth);
   }
   return null;
 }
+function sumColumnSizesPx(columnSizes, tableWidth) {
+  if (tableWidth === void 0) return null;
+  let sum = 0;
+  for (const size of columnSizes) {
+    const px2 = parseWidthToPx(size, tableWidth);
+    if (px2 === null) return null;
+    sum += px2;
+  }
+  return sum;
+}
+function sumColumnSizeParts(columnSizes) {
+  let pxSum = 0;
+  let percentSum = 0;
+  let hasCalc = false;
+  for (const size of columnSizes) {
+    if (size.endsWith("px")) {
+      pxSum += parseFloat(size.replace("px", ""));
+    } else if (size.endsWith("%")) {
+      percentSum += parseFloat(size.replace("%", ""));
+    } else {
+      hasCalc = true;
+    }
+  }
+  return {
+    pxSum,
+    percentSum,
+    hasCalc
+  };
+}
+function resolveTableContentWidth(tableWidth, columnSizes, minWidthPx = 0) {
+  if (tableWidth === void 0) return void 0;
+  const {
+    pxSum,
+    percentSum,
+    hasCalc
+  } = sumColumnSizeParts(columnSizes);
+  if (!hasCalc && percentSum > 0 && percentSum < 100) {
+    const selfConsistent = pxSum / (1 - percentSum / 100);
+    return Math.max(tableWidth, minWidthPx, Math.ceil(selfConsistent));
+  }
+  const sum = sumColumnSizesPx(columnSizes, tableWidth);
+  if (sum === null) return void 0;
+  return Math.max(tableWidth, sum, minWidthPx);
+}
 function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths) {
   const {
     claimedPercentages,
@@ -14790,6 +14865,29 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColum
   });
   return sizes2;
 }
+function calcColumnLayout(columns, probeWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths, inDocumentScrollLayout) {
+  if (probeWidth === void 0) {
+    return {
+      columnSizes: calcColumnSizes(columns, void 0, tableMinWidthPx, expandedColumnIds, resizedWidths),
+      contentWidth: void 0
+    };
+  }
+  if (!inDocumentScrollLayout) {
+    return {
+      columnSizes: calcColumnSizes(columns, probeWidth, tableMinWidthPx, expandedColumnIds, resizedWidths),
+      contentWidth: probeWidth
+    };
+  }
+  let columnSizes = calcColumnSizes(columns, probeWidth, tableMinWidthPx, expandedColumnIds, resizedWidths);
+  const contentWidth = resolveTableContentWidth(probeWidth, columnSizes, tableMinWidthPx) ?? probeWidth;
+  if (contentWidth > probeWidth + 1) {
+    columnSizes = calcColumnSizes(columns, contentWidth, tableMinWidthPx, expandedColumnIds, resizedWidths);
+  }
+  return {
+    columnSizes,
+    contentWidth
+  };
+}
 function assignDefaultColumnIds(columns) {
   return columns.map((c, idx) => {
     const {
@@ -15754,22 +15852,32 @@ function useColumnResizing(storageKey) {
 
 // src/components/Table/hooks/useSetupColumnSizes.ts
 var import_use_debounce5 = require("use-debounce");
-function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing) {
+function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, inDocumentScrollLayout) {
   const { resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths } = useColumnResizing(
     disableColumnResizing ? void 0 : visibleColumnsStorageKey
   );
   const calculateImmediately = (0, import_react72.useRef)(true);
   const [tableWidth, setTableWidth] = (0, import_react72.useState)();
-  const prevTableWidthRef = (0, import_react72.useRef)(tableWidth);
+  const [contentWidth, setContentWidth] = (0, import_react72.useState)();
   const [columnSizes, setColumnSizes] = (0, import_react72.useState)(
-    calcColumnSizes(columns, tableWidth, style.minWidthPx, expandedColumnIds, resizedWidths)
+    () => calcColumnLayout(columns, void 0, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout).columnSizes
   );
-  const setTableAndColumnWidths = (0, import_react72.useCallback)(
-    (width2) => {
-      setTableWidth(width2);
-      setColumnSizes(calcColumnSizes(columns, width2, style.minWidthPx, expandedColumnIds, resizedWidths));
+  const prevTableWidthRef = (0, import_react72.useRef)(tableWidth);
+  const applyColumnLayout = (0, import_react72.useCallback)(
+    (probeWidth) => {
+      const layout = calcColumnLayout(
+        columns,
+        probeWidth,
+        style.minWidthPx,
+        expandedColumnIds,
+        resizedWidths,
+        inDocumentScrollLayout
+      );
+      setTableWidth(probeWidth);
+      setContentWidth(layout.contentWidth);
+      setColumnSizes(layout.columnSizes);
     },
-    [setTableWidth, setColumnSizes, columns, style, expandedColumnIds, resizedWidths]
+    [columns, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout]
   );
   (0, import_react72.useEffect)(() => {
     if (!prevTableWidthRef.current) {
@@ -15798,32 +15906,40 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     () => {
       if (!calculateImmediately.current) {
         const width2 = resizeRef.current?.clientWidth;
-        width2 && setTableAndColumnWidths(width2);
+        width2 && applyColumnLayout(width2);
       }
     },
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [columns, resizedWidths, setTableAndColumnWidths]
+    [columns, resizedWidths, applyColumnLayout]
   );
-  const setTableAndColumnWidthsDebounced = (0, import_use_debounce5.useDebouncedCallback)(setTableAndColumnWidths, 100);
+  const applyColumnLayoutDebounced = (0, import_use_debounce5.useDebouncedCallback)(applyColumnLayout, 100);
   const onResize = (0, import_react72.useCallback)(
     () => {
       const target = resizeRef.current;
       if (target && target.clientWidth !== tableWidth) {
         if (calculateImmediately.current) {
           calculateImmediately.current = false;
-          setTableAndColumnWidths(target.clientWidth);
+          applyColumnLayout(target.clientWidth);
         } else {
-          setTableAndColumnWidthsDebounced(target.clientWidth);
+          applyColumnLayoutDebounced(target.clientWidth);
         }
       }
     },
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]
+    [tableWidth, applyColumnLayout, applyColumnLayoutDebounced]
   );
   (0, import_utils67.useResizeObserver)({ ref: resizeRef, onResize });
-  return { columnSizes, tableWidth, resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths };
+  return {
+    columnSizes,
+    tableWidth,
+    contentWidth,
+    resizedWidths,
+    setResizedWidth,
+    setResizedWidths,
+    resetColumnWidths
+  };
 }
 
 // src/hooks/useRenderCount.ts
@@ -15897,7 +16013,7 @@ function DocumentScrollLayoutViewportRoot({
 // src/components/Table/GridTable.tsx
 var import_runtime53 = require("@homebound/truss/runtime");
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var __maybeInc9 = (inc) => {
+var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var runningInJest = false;
@@ -15972,6 +16088,7 @@ function GridTable(props) {
   const {
     tableState
   } = api;
+  const inDocumentScrollLayout = useDocumentScrollLayout();
   tableState.onRowSelect = onRowSelect;
   (0, import_react75.useEffect)(() => {
     (0, import_mobx10.runInAction)(() => {
@@ -15994,11 +16111,12 @@ function GridTable(props) {
   const {
     columnSizes,
     tableWidth,
+    contentWidth,
     resizedWidths,
     setResizedWidth,
     setResizedWidths,
     resetColumnWidths
-  } = useSetupColumnSizes(style, columns, resizeTarget ?? resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing);
+  } = useSetupColumnSizes(style, columns, resizeTarget ?? resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, inDocumentScrollLayout);
   (0, import_react75.useEffect)(() => {
     api.resetColumnWidthsFn = !disableColumnResizing ? resetColumnWidths : void 0;
   }, [api, resetColumnWidths, disableColumnResizing]);
@@ -16169,9 +16287,18 @@ function GridTable(props) {
     tableState,
     tableContainerRef
   }), [tableState, tableContainerRef]);
+  const tableStyle = (0, import_react75.useMemo)(() => {
+    if (!inDocumentScrollLayout || contentWidth === void 0 || tableWidth === void 0) return style;
+    const minWidthPx = Math.max(style.minWidthPx ?? 0, contentWidth);
+    if (minWidthPx === style.minWidthPx) return style;
+    return {
+      ...style,
+      minWidthPx
+    };
+  }, [contentWidth, inDocumentScrollLayout, style, tableWidth]);
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ref: resizeRef, ...(0, import_runtime53.trussProps)(getTableRefWidthStyles(as === "virtual")) }),
-    renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ref: resizeRef, ...(0, import_runtime53.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
+    renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
 var renders = {
@@ -16199,8 +16326,9 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime53.trussProps)({
       ...stickyHeader ? {
         position: "sticky",
+        transition: "transitionTop",
         top: ["top_var", {
-          "--top": (0, import_runtime53.maybeCssVar)(__maybeInc9(stickyNavAndHeaderOffset(stickyOffset)))
+          "--top": (0, import_runtime53.maybeCssVar)(__maybeInc10(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime53.maybeCssVar)(zIndices.tableStickyHeader)
@@ -16239,8 +16367,9 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("thead", { ...(0, import_runtime53.trussProps)({
       ...stickyHeader ? {
         position: "sticky",
+        transition: "transitionTop",
         top: ["top_var", {
-          "--top": (0, import_runtime53.maybeCssVar)(__maybeInc9(stickyNavAndHeaderOffset(stickyOffset)))
+          "--top": (0, import_runtime53.maybeCssVar)(__maybeInc10(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime53.maybeCssVar)(zIndices.tableStickyHeader)
@@ -16291,11 +16420,16 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
       components: {
         // zIndex keeps the pinned head above sticky columns; `top` matches the offsets used by
         // the div/table render paths so virtualized tables pin below the global nav + page header.
-        TopItemList: import_react75.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...props, ref, style: {
+        TopItemList: import_react75.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...props, ref, ...(0, import_runtime53.mergeProps)(void 0, {
           ...props.style,
+          ...style.minWidthPx !== void 0 ? {
+            minWidth: style.minWidthPx
+          } : {},
           zIndex: zIndices.tableStickyHeader,
-          top: stickyNavAndHeaderOffset(stickyOffset)
-        } })),
+          top: stickyTableHeaderOffset(stickyOffset)
+        }, {
+          transition: "transitionTop"
+        }) })),
         List: VirtualRoot(style, columns, id, xss),
         Footer: () => {
           return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime53.trussProps)({
@@ -16322,7 +16456,7 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
             return (
               // Ensure the fallback message is the same width as the table
               /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime53.trussProps)({
-                ...getTableRefWidthStyles(true),
+                ...getTableRefWidthStyles(true, inDocumentScrollLayout),
                 ...keptSelectedRows.length === 0 && style.firstBodyRowCss,
                 ...visibleDataRows.length === 0 && style.lastRowCss
               }), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { ...(0, import_runtime53.trussProps)({
@@ -16481,7 +16615,7 @@ var import_react76 = require("react");
 var import_react_aria40 = require("react-aria");
 var import_runtime56 = require("@homebound/truss/runtime");
 var import_jsx_runtime85 = require("react/jsx-runtime");
-var __maybeInc10 = (inc) => {
+var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Accordion(props) {
@@ -16628,7 +16762,7 @@ function Accordion(props) {
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime56.trussProps)({
       overflow: "oh",
       height: ["h_var", {
-        "--height": (0, import_runtime56.maybeCssVar)(__maybeInc10(contentHeight))
+        "--height": (0, import_runtime56.maybeCssVar)(__maybeInc11(contentHeight))
       }],
       transition: "transition_height_250ms_ease_in_out"
     }), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { ...(0, import_runtime56.trussProps)({
@@ -18212,7 +18346,7 @@ function BoundTreeSelectField(props) {
 var import_react86 = require("react");
 var import_runtime63 = require("@homebound/truss/runtime");
 var import_jsx_runtime115 = require("react/jsx-runtime");
-var __maybeInc11 = (inc) => {
+var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FormLines(props) {
@@ -18250,13 +18384,13 @@ function FormLines(props) {
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": (0, import_runtime63.maybeCssVar)(__maybeInc11(gap))
+      "--gap": (0, import_runtime63.maybeCssVar)(__maybeInc12(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": (0, import_runtime63.maybeCssVar)(__maybeInc11(gap))
+      "--paddingBottom": (0, import_runtime63.maybeCssVar)(__maybeInc12(gap))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime63.maybeCssVar)(__maybeInc11(sizes[width2]))
+      "--width": (0, import_runtime63.maybeCssVar)(__maybeInc12(sizes[width2]))
     }]
   }), children: import_react86.Children.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -19136,7 +19270,7 @@ function useActiveSection(sectionsWithRefs) {
 // src/components/Layout/FullBleed.tsx
 var import_runtime71 = require("@homebound/truss/runtime");
 var import_react94 = require("react");
-var __maybeInc12 = (inc) => {
+var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FullBleed({
@@ -19167,17 +19301,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": (0, import_runtime71.maybeCssVar)(__maybeInc12(invertSpacing(paddingLeft)))
+            "--marginLeft": (0, import_runtime71.maybeCssVar)(__maybeInc13(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": (0, import_runtime71.maybeCssVar)(__maybeInc12(invertSpacing(paddingRight)))
+            "--marginRight": (0, import_runtime71.maybeCssVar)(__maybeInc13(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": (0, import_runtime71.maybeCssVar)(__maybeInc12(paddingLeft))
+              "--paddingLeft": (0, import_runtime71.maybeCssVar)(__maybeInc13(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": (0, import_runtime71.maybeCssVar)(__maybeInc12(paddingRight))
+              "--paddingRight": (0, import_runtime71.maybeCssVar)(__maybeInc13(paddingRight))
             }]
           } : {}
         }
@@ -19191,6 +19325,7 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
+var import_utils117 = require("@react-aria/utils");
 var import_react102 = __toESM(require("react"), 1);
 
 // src/components/ButtonMenu.tsx
@@ -20221,6 +20356,9 @@ function LoadingTable(props) {
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
 var import_runtime78 = require("@homebound/truss/runtime");
 var import_jsx_runtime148 = require("react/jsx-runtime");
+var __maybeInc14 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function GridTableLayoutComponent(props) {
   const {
     pageTitle,
@@ -20246,8 +20384,12 @@ function GridTableLayoutComponent(props) {
   const api = (0, import_react102.useMemo)(() => tableProps.api ?? new GridTableApiImpl(), [tableProps.api]);
   const [view, setView] = (0, import_react102.useState)(defaultView);
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
-  const showTableActions = layoutState?.filterDefs || layoutState?.search || hasHideableColumns || !!withCardView;
+  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView);
   const isVirtualized = tableProps.as === "virtual";
+  const inDocumentScrollLayout = useDocumentScrollLayout();
+  const tableActionsRef = (0, import_react102.useRef)(null);
+  const tableWrapperRef = (0, import_react102.useRef)(null);
+  useSetTableActionsHeight(tableWrapperRef, tableActionsRef, inDocumentScrollLayout && showTableActions);
   const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
   (0, import_react102.useEffect)(() => {
     if (layoutState?.setVisibleColumnIds) {
@@ -20255,27 +20397,58 @@ function GridTableLayoutComponent(props) {
     }
   }, [visibleColumnIds, layoutState]);
   const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
+  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(TableActions, { right: (hasHideableColumns || withCardView) && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "df gap1", children: [
+    hasHideableColumns && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
+      icon: "kanban",
+      size: "md",
+      label: "",
+      variant: "secondaryBlack"
+    }, ...tid.editColumnsButton }),
+    withCardView && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ViewToggleButton, { view, onChange: setView })
+  ] }), xss: {
+    paddingTop: "pt3",
+    ...inDocumentScrollLayout ? {
+      paddingLeft: "pl3",
+      paddingRight: "pr3"
+    } : {}
+  }, children: layoutState && (layoutState.filterDefs || layoutState.search) && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy, searchProps: layoutState.search ? {
+    onSearch: layoutState.setSearchString
+  } : void 0 }) });
+  const tableBody = /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_jsx_runtime148.Fragment, { children: [
+    view === "card" && withCardView ? withCardView : isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(GridTable, { ...tableProps, api, filter: clientSearch, style: {
+      allWhite: true
+    }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey }) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(QueryTable, { ...tableProps, api, filter: clientSearch, style: {
+      allWhite: true
+    }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey }),
+    layoutState && totalCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Pagination, { page: [layoutState.page, layoutState._pagination.setPage], totalCount, pageSizes: layoutState._pagination.pageSizes, ...tid.pagination })
+  ] });
+  const tableScrollContent = /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_jsx_runtime148.Fragment, { children: [
+    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime78.trussProps)({
+      ...inDocumentScrollLayout ? {
+        transition: "transitionTop",
+        position: "sticky",
+        top: ["top_var", {
+          "--top": (0, import_runtime78.maybeCssVar)(__maybeInc14(stickyNavAndHeaderOffset()))
+        }],
+        left: ["left_var", {
+          "--left": (0, import_runtime78.maybeCssVar)(__maybeInc14(documentScrollChromeLeft()))
+        }],
+        width: ["w_var", {
+          "--width": (0, import_runtime78.maybeCssVar)(__maybeInc14(documentScrollChromeWidth()))
+        }],
+        zIndex: ["z_var", {
+          "--zIndex": (0, import_runtime78.maybeCssVar)(zIndices.tableActions)
+        }],
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface)"
+        }]
+      } : {}
+    }), ...tid.stickyContent, children: tableActionsEl }),
+    inDocumentScrollLayout ? tableBody : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ScrollableContent, { virtualized: isVirtualized, children: tableBody })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(import_jsx_runtime148.Fragment, { children: [
     pageTitle && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
-    showTableActions && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(TableActions, { right: /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "df gap1", children: [
-      hasHideableColumns && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", trigger: {
-        icon: "kanban",
-        size: "md",
-        label: "",
-        variant: "secondaryBlack"
-      }, ...tid.editColumnsButton }),
-      withCardView && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ViewToggleButton, { view, onChange: setView })
-    ] }), children: layoutState && (layoutState.filterDefs || layoutState.search) && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(_FilterDropdownMenu, { filterDefs: layoutState.filterDefs, filter: layoutState.filter, onChange: layoutState.setFilter, groupBy: layoutState.groupBy, searchProps: layoutState.search ? {
-      onSearch: layoutState.setSearchString
-    } : void 0 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(ScrollableContent, { virtualized: isVirtualized, children: [
-      view === "card" && withCardView ? withCardView : isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(GridTable, { ...tableProps, api, filter: clientSearch, style: {
-        allWhite: true
-      }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey }) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(QueryTable, { ...tableProps, api, filter: clientSearch, style: {
-        allWhite: true
-      }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey }),
-      layoutState && totalCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Pagination, { page: [layoutState.page, layoutState._pagination.setPage], totalCount, pageSizes: layoutState._pagination.pageSizes, ...tid.pagination })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { ref: tableWrapperRef, className: "display_contents", ...tid.tableWrapper, children: tableScrollContent })
   ] });
 }
 var GridTableLayout = import_react102.default.memo(GridTableLayoutComponent);
@@ -20345,6 +20518,33 @@ function useGridTableLayoutState({
     }
   };
 }
+function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
+  const syncHeightVar = (0, import_react102.useCallback)(() => {
+    const tableWrapper = tableWrapperRef.current;
+    if (!tableWrapper) return;
+    if (!enabled) {
+      tableWrapper.style.removeProperty(beamTableActionsHeightVar);
+      return;
+    }
+    const height = tableActionsRef.current ? Math.round(tableActionsRef.current.getBoundingClientRect().height) : 0;
+    if (height > 0) {
+      tableWrapper.style.setProperty(beamTableActionsHeightVar, `${height}px`);
+    } else {
+      tableWrapper.style.removeProperty(beamTableActionsHeightVar);
+    }
+  }, [enabled, tableActionsRef, tableWrapperRef]);
+  (0, import_utils117.useResizeObserver)({
+    ref: tableActionsRef,
+    onResize: enabled ? syncHeightVar : noop
+  });
+  (0, import_react102.useLayoutEffect)(() => {
+    syncHeightVar();
+    const tableWrapper = tableWrapperRef.current;
+    return () => {
+      tableWrapper?.style.removeProperty(beamTableActionsHeightVar);
+    };
+  }, [tableWrapperRef, syncHeightVar]);
+}
 function Header2(props) {
   const {
     pageTitle,
@@ -20361,7 +20561,6 @@ function Header2(props) {
       paddingBottom: "pb3",
       paddingRight: "pr3",
       paddingLeft: "pl3",
-      marginBottom: "mb3",
       minHeight: "mh_50px",
       backgroundColor: "bgWhite",
       display: "df",
@@ -20437,7 +20636,7 @@ var import_framer_motion3 = require("framer-motion");
 var import_react104 = require("react");
 var import_runtime79 = require("@homebound/truss/runtime");
 var import_jsx_runtime151 = require("react/jsx-runtime");
-var __maybeInc13 = (inc) => {
+var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function RightPaneLayout(props) {
@@ -20458,7 +20657,7 @@ function RightPaneLayout(props) {
     /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ...(0, import_runtime79.trussProps)({
       ...{
         width: ["w_var", {
-          "--width": (0, import_runtime79.maybeCssVar)(__maybeInc13(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": (0, import_runtime79.maybeCssVar)(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -20474,7 +20673,7 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": (0, import_runtime79.maybeCssVar)(__maybeInc13(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": (0, import_runtime79.maybeCssVar)(__maybeInc15(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
@@ -20970,7 +21169,7 @@ var import_react110 = require("react");
 var import_react_aria49 = require("react-aria");
 
 // src/components/Tag.tsx
-var import_utils123 = require("@react-aria/utils");
+var import_utils124 = require("@react-aria/utils");
 var import_react109 = require("react");
 var import_runtime82 = require("@homebound/truss/runtime");
 var import_jsx_runtime158 = require("react/jsx-runtime");
@@ -20986,7 +21185,7 @@ function Tag(props) {
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = (0, import_react109.useState)(false);
   const ref = (0, import_react109.useRef)(null);
-  (0, import_utils123.useResizeObserver)({
+  (0, import_utils124.useResizeObserver)({
     ref,
     onResize: () => {
       if (ref.current) {
@@ -21541,7 +21740,7 @@ function ResponsiveGridItem(props) {
 // src/components/Grid/useResponsiveGrid.ts
 var import_react116 = require("react");
 var import_runtime89 = require("@homebound/truss/runtime");
-var __maybeInc14 = (inc) => {
+var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function useResponsiveGrid(props) {
@@ -21563,7 +21762,7 @@ function useResponsiveGrid(props) {
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": (0, import_runtime89.maybeCssVar)(__maybeInc14(gridGap))
+        "--gap": (0, import_runtime89.maybeCssVar)(__maybeInc16(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -21688,7 +21887,7 @@ function HbSpinnerProvider({
 // src/components/HomeboundLogo.tsx
 var import_runtime90 = require("@homebound/truss/runtime");
 var import_jsx_runtime166 = require("react/jsx-runtime");
-var __maybeInc15 = (inc) => {
+var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function HomeboundLogo(props) {
@@ -21702,16 +21901,16 @@ function HomeboundLogo(props) {
       "--fill": (0, import_runtime90.maybeCssVar)(fill)
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime90.maybeCssVar)(__maybeInc15(width2))
+      "--width": (0, import_runtime90.maybeCssVar)(__maybeInc17(width2))
     }],
     height: ["h_var", {
-      "--height": (0, import_runtime90.maybeCssVar)(__maybeInc15(height))
+      "--height": (0, import_runtime90.maybeCssVar)(__maybeInc17(height))
     }]
   }), children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
 }
 
 // src/components/MaxLines.tsx
-var import_utils131 = require("@react-aria/utils");
+var import_utils132 = require("@react-aria/utils");
 var import_react119 = require("react");
 var import_runtime91 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
@@ -21722,7 +21921,7 @@ function MaxLines({
   const elRef = (0, import_react119.useRef)(null);
   const [hasMore, setHasMore] = (0, import_react119.useState)(false);
   const [expanded, setExpanded] = (0, import_react119.useState)(false);
-  (0, import_utils131.useLayoutEffect)(() => {
+  (0, import_utils132.useLayoutEffect)(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
@@ -21733,7 +21932,7 @@ function MaxLines({
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
-  (0, import_utils131.useResizeObserver)({
+  (0, import_utils132.useResizeObserver)({
     ref: elRef,
     onResize
   });
@@ -21757,7 +21956,7 @@ function MaxLines({
 var import_change_case8 = require("change-case");
 
 // src/components/AppNav/AppNavGroup.tsx
-var import_utils133 = require("@react-aria/utils");
+var import_utils134 = require("@react-aria/utils");
 var import_change_case7 = require("change-case");
 var import_react122 = require("react");
 
@@ -21963,7 +22162,7 @@ function useAppNavGroupExpanded(linkGroup) {
 // src/components/AppNav/AppNavGroup.tsx
 var import_runtime93 = require("@homebound/truss/runtime");
 var import_jsx_runtime169 = require("react/jsx-runtime");
-var __maybeInc16 = (inc) => {
+var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function AppNavGroupView(props) {
@@ -22000,7 +22199,7 @@ function AppNavGroupDisclosure(props) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl]);
-  (0, import_utils133.useResizeObserver)({
+  (0, import_utils134.useResizeObserver)({
     ref: contentRef,
     onResize
   });
@@ -22010,7 +22209,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": (0, import_runtime93.maybeCssVar)(__maybeInc16(contentHeight))
+        "--height": (0, import_runtime93.maybeCssVar)(__maybeInc18(contentHeight))
       }]
     }), ...tid.panel, children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { ref: setContentEl, className: "df fdc pl2", children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(AppNavItems, { items: linkGroup.items, panelCollapsed: false, ...tid }) }) })
   ] });
@@ -22613,7 +22812,7 @@ function PageHeader2(props) {
 }
 
 // src/components/ScrollShadows.tsx
-var import_utils141 = require("@react-aria/utils");
+var import_utils142 = require("@react-aria/utils");
 var import_react125 = require("react");
 var import_runtime99 = require("@homebound/truss/runtime");
 var import_jsx_runtime177 = require("react/jsx-runtime");
@@ -22702,7 +22901,7 @@ function ScrollShadows(props) {
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
   const onResize = (0, import_react125.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  (0, import_utils141.useResizeObserver)({
+  (0, import_utils142.useResizeObserver)({
     ref: scrollRef,
     onResize
   });
@@ -22929,7 +23128,7 @@ var import_react_aria55 = require("react-aria");
 var import_runtime101 = require("@homebound/truss/runtime");
 var import_jsx_runtime180 = require("react/jsx-runtime");
 var import_react129 = require("react");
-var __maybeInc17 = (inc) => {
+var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Stepper(props) {
@@ -22985,7 +23184,7 @@ function Stepper(props) {
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": (0, import_runtime101.maybeCssVar)(__maybeInc17(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": (0, import_runtime101.maybeCssVar)(__maybeInc19(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -23405,7 +23604,7 @@ function useToast() {
 // src/layouts/SideNavLayout/SideNavLayout.tsx
 var import_runtime104 = require("@homebound/truss/runtime");
 var import_jsx_runtime185 = require("react/jsx-runtime");
-var __maybeInc18 = (inc) => {
+var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
@@ -23460,11 +23659,11 @@ function SideNavLayoutContent(props) {
         "--zIndex": (0, import_runtime104.maybeCssVar)(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": (0, import_runtime104.maybeCssVar)(__maybeInc18(navTop))
+        "--top": (0, import_runtime104.maybeCssVar)(__maybeInc20(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": (0, import_runtime104.maybeCssVar)(__maybeInc18(railViewportHeight))
+        "--height": (0, import_runtime104.maybeCssVar)(__maybeInc20(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -23474,7 +23673,7 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": (0, import_runtime104.maybeCssVar)(__maybeInc18(navTop))
+          "--top": (0, import_runtime104.maybeCssVar)(__maybeInc20(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
@@ -23523,19 +23722,28 @@ var import_runtime105 = require("@homebound/truss/runtime");
 // src/layouts/useAutoHideOnScroll.ts
 var import_react132 = require("react");
 var THRESHOLD = 80;
+function getInitialAutoHideState() {
+  if (typeof window === "undefined" || window.scrollY <= 0) {
+    return { state: "static", atTop: true };
+  }
+  return { state: "hidden", atTop: false };
+}
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
-  const [state, setState] = (0, import_react132.useState)("static");
-  const stateRef = (0, import_react132.useRef)("static");
-  const [atTop, setAtTop] = (0, import_react132.useState)(true);
-  const atTopRef = (0, import_react132.useRef)(true);
+  const initial = getInitialAutoHideState();
+  const [state, setState] = (0, import_react132.useState)(initial.state);
+  const stateRef = (0, import_react132.useRef)(initial.state);
+  const [atTop, setAtTop] = (0, import_react132.useState)(initial.atTop);
+  const atTopRef = (0, import_react132.useRef)(initial.atTop);
   const getTopOffsetRef = (0, import_react132.useRef)(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
   const lastScrollY = (0, import_react132.useRef)(Number.POSITIVE_INFINITY);
-  (0, import_react132.useEffect)(() => {
+  const lastScrollHeight = (0, import_react132.useRef)(0);
+  (0, import_react132.useLayoutEffect)(() => {
     if (!enabled) {
       stateRef.current = "static";
       atTopRef.current = true;
       lastScrollY.current = Number.POSITIVE_INFINITY;
+      lastScrollHeight.current = 0;
       setState("static");
       setAtTop(true);
       return;
@@ -23550,22 +23758,41 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
         setAtTop(nextAtTop);
       }
     };
+    const autoHideStateOnLayoutChange = (rect, topOffset) => {
+      const nextAtTop = rect.top >= topOffset;
+      let next = stateRef.current;
+      if (nextAtTop) {
+        next = "static";
+      } else if (rect.bottom < -THRESHOLD && next !== "revealed") {
+        next = "hidden";
+      }
+      return { next, nextAtTop };
+    };
     const updateAutoHideState = () => {
       const el = spacerRef.current;
       if (!el) return;
+      const doc = document.documentElement;
+      const currentScrollHeight = doc.scrollHeight;
+      const scrollHeightChanged = lastScrollHeight.current !== 0 && currentScrollHeight !== lastScrollHeight.current;
+      lastScrollHeight.current = currentScrollHeight;
       if (window.scrollY <= 0) {
         lastScrollY.current = 0;
         commit("static", true);
         return;
       }
-      const rect = el.getBoundingClientRect();
       const currentY = window.scrollY;
+      const rect = el.getBoundingClientRect();
+      const topOffset = getTopOffsetRef.current?.() ?? 0;
+      if (scrollHeightChanged) {
+        lastScrollY.current = currentY;
+        const { next: next2, nextAtTop: nextAtTop2 } = autoHideStateOnLayoutChange(rect, topOffset);
+        commit(next2, nextAtTop2);
+        return;
+      }
       const dy = currentY - lastScrollY.current;
       lastScrollY.current = currentY;
-      const topOffset = getTopOffsetRef.current?.() ?? 0;
-      const nextAtTop = rect.top >= topOffset;
-      const doc = document.documentElement;
       const atBottom = currentY >= doc.scrollHeight - doc.clientHeight;
+      const nextAtTop = rect.top >= topOffset;
       let next = stateRef.current;
       if (nextAtTop) {
         next = "static";
@@ -23583,7 +23810,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils148 = require("@react-aria/utils");
+var import_utils149 = require("@react-aria/utils");
 var import_react133 = require("react");
 function useMeasuredHeight(ref, enabled) {
   const [height, setHeight] = (0, import_react133.useState)(0);
@@ -23592,7 +23819,7 @@ function useMeasuredHeight(ref, enabled) {
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils148.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_utils149.useResizeObserver)({ ref, onResize: syncElementHeight });
   (0, import_react133.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
@@ -23612,7 +23839,7 @@ function useNavbarLayoutHeight() {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_jsx_runtime187 = require("react/jsx-runtime");
-var __maybeInc19 = (inc) => {
+var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -23643,7 +23870,7 @@ function NavbarLayout(props) {
         "--zIndex": (0, import_runtime105.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime105.maybeCssVar)(__maybeInc19(innerWidth))
+        "--width": (0, import_runtime105.maybeCssVar)(__maybeInc21(innerWidth))
       }]
     }
   ) : (
@@ -23655,7 +23882,7 @@ function NavbarLayout(props) {
         "--zIndex": (0, import_runtime105.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime105.maybeCssVar)(__maybeInc19(innerWidth))
+        "--width": (0, import_runtime105.maybeCssVar)(__maybeInc21(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -23684,7 +23911,7 @@ function NavbarLayout(props) {
 var import_react136 = require("react");
 var import_runtime106 = require("@homebound/truss/runtime");
 var import_jsx_runtime188 = require("react/jsx-runtime");
-var __maybeInc20 = (inc) => {
+var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -23708,16 +23935,16 @@ function PageHeaderLayout(props) {
   const cssVars = headerHeight > 0 && headerOccupiesPosition ? {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
-  const headerLeft = `var(${beamSideNavLayoutWidthVar}, 0px)`;
-  const headerWidth = `calc(var(${beamLayoutViewportWidthVar}, 100vw) - var(${beamSideNavLayoutWidthVar}, 0px))`;
+  const headerLeft = documentScrollChromeLeft();
+  const headerWidth = documentScrollChromeWidth();
   const outerTop = `var(${beamNavbarLayoutHeightVar}, 0px)`;
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime106.maybeCssVar)(__maybeInc20(headerLeft))
+      "--left": (0, import_runtime106.maybeCssVar)(__maybeInc22(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime106.maybeCssVar)(__maybeInc20(headerWidth))
+      "--width": (0, import_runtime106.maybeCssVar)(__maybeInc22(headerWidth))
     }],
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime106.maybeCssVar)(zIndices.pageStickyHeader)
@@ -23725,10 +23952,10 @@ function PageHeaderLayout(props) {
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime106.maybeCssVar)(__maybeInc20(headerLeft))
+      "--left": (0, import_runtime106.maybeCssVar)(__maybeInc22(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime106.maybeCssVar)(__maybeInc20(headerWidth))
+      "--width": (0, import_runtime106.maybeCssVar)(__maybeInc22(headerWidth))
     }],
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime106.maybeCssVar)(zIndices.pageStickyHeader)
@@ -23920,6 +24147,7 @@ function PageHeaderLayout(props) {
   beamNavbarLayoutHeightVar,
   beamPageHeaderLayoutHeightVar,
   beamSideNavLayoutWidthVar,
+  beamTableActionsHeightVar,
   booleanFilter,
   boundCheckboxField,
   boundCheckboxGroupField,
@@ -23938,6 +24166,7 @@ function PageHeaderLayout(props) {
   boundTextField,
   boundToggleChipGroupField,
   boundTreeSelectField,
+  calcColumnLayout,
   calcColumnSizes,
   cardStyle,
   checkboxFilter,
@@ -23958,6 +24187,8 @@ function PageHeaderLayout(props) {
   defaultRenderFn,
   defaultStyle,
   defaultTestId,
+  documentScrollChromeLeft,
+  documentScrollChromeWidth,
   dragHandleColumn,
   emptyCell,
   ensureClientSideSortValueIsSortable,
@@ -24012,6 +24243,7 @@ function PageHeaderLayout(props) {
   px,
   recursivelyGetContainingRow,
   reservedRowKinds,
+  resolveTableContentWidth,
   resolveTooltip,
   rowClickRenderFn,
   rowLinkRenderFn,
@@ -24026,6 +24258,9 @@ function PageHeaderLayout(props) {
   singleFilter,
   sortFn,
   sortRows,
+  stickyNavAndHeaderOffset,
+  stickyTableHeaderOffset,
+  sumColumnSizesPx,
   switchFocusStyles,
   switchHoverStyles,
   switchSelectedHoverStyles,