From 495cf6d22b39d3430b7ba138a7fad0ba5f89a5ff Mon Sep 17 00:00:00 2001
From: Brandon Dow <bdow@homebound.com>
Date: Fri, 10 May 2024 16:15:43 -0400
Subject: [PATCH] fix: Fallback message for virtual table was exceeding table
 header width

---
 src/components/Table/GridTable.stories.tsx | 13 ++++++++++++-
 src/components/Table/GridTable.tsx         |  9 +++++----
 src/components/Table/utils/utils.tsx       |  4 ++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Table/GridTable.stories.tsx b/src/components/Table/GridTable.stories.tsx
index fa3223995..799d69535 100644
--- a/src/components/Table/GridTable.stories.tsx
+++ b/src/components/Table/GridTable.stories.tsx
@@ -298,7 +298,17 @@ export function InfiniteScrollWithLoader() {
 export function NoRowsFallback() {
   const nameColumn: GridColumn<Row> = { header: "Name", data: ({ name }) => name };
   const valueColumn: GridColumn<Row> = { header: "Value", data: ({ value }) => value };
-  return <GridTable columns={[nameColumn, valueColumn]} rows={[simpleHeader]} fallbackMessage="There were no rows." />;
+  return (
+    <div css={Css.wPx(500).hPx(500).$}>
+      <GridTable
+        columns={[nameColumn, valueColumn]}
+        as={"virtual"}
+        style={{ bordered: true, allWhite: true }}
+        rows={[simpleHeader]}
+        fallbackMessage="There were no rows."
+      />
+    </div>
+  );
 }
 
 // Make a `Row` ADT for a table with a header + 3 levels of nesting
@@ -2094,6 +2104,7 @@ export function MinColumnWidths() {
       <GridTable
         columns={[nameColumn, valueColumn, actionColumn]}
         style={{ bordered: true, allWhite: true }}
+        as="virtual"
         rows={[
           simpleHeader,
           { kind: "data", id: "group", data: { name: "group", value: 0 } },
diff --git a/src/components/Table/GridTable.tsx b/src/components/Table/GridTable.tsx
index cc9bd0698..537bf34f6 100644
--- a/src/components/Table/GridTable.tsx
+++ b/src/components/Table/GridTable.tsx
@@ -2,7 +2,7 @@ import memoizeOne from "memoize-one";
 import { runInAction } from "mobx";
 import React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from "react";
 import { Components, Virtuoso, VirtuosoHandle } from "react-virtuoso";
-import { Loader } from "src/components";
+import { getTableRefWidthStyles, Loader } from "src/components";
 import { DiscriminateUnion, GridRowKind } from "src/components/index";
 import { PresentationFieldProps, PresentationProvider } from "src/components/PresentationContext";
 import { GridTableApi, GridTableApiImpl } from "src/components/Table/GridTableApi";
@@ -20,7 +20,7 @@ import {
 import { assignDefaultColumnIds } from "src/components/Table/utils/columns";
 import { GridRowLookup } from "src/components/Table/utils/GridRowLookup";
 import { TableStateContext } from "src/components/Table/utils/TableState";
-import { EXPANDABLE_HEADER, KEPT_GROUP, isCursorBelowMidpoint, zIndices } from "src/components/Table/utils/utils";
+import { EXPANDABLE_HEADER, isCursorBelowMidpoint, KEPT_GROUP, zIndices } from "src/components/Table/utils/utils";
 import { Css, Only } from "src/Css";
 import { useComputed } from "src/hooks";
 import { useRenderCount } from "src/hooks/useRenderCount";
@@ -486,7 +486,7 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
       <PresentationProvider fieldProps={fieldProps} wrap={style?.presentationSettings?.wrap}>
         {/* If virtualized take some pixels off the width to accommodate when virtuoso's scrollbar is introduced. */}
         {/* Otherwise a horizontal scrollbar will _always_ appear once the vertical scrollbar is needed */}
-        <div ref={resizeRef} css={Css.w100.if(as === "virtual").w("calc(100% - 20px)").$} />
+        <div ref={resizeRef} css={getTableRefWidthStyles(as === "virtual")} />
         {renders[_as](
           style,
           id,
@@ -713,7 +713,8 @@ function renderVirtual<R extends Kinded>(
         if (firstRowMessage) {
           if (index === 0) {
             return (
-              <div css={Css.add("gridColumn", `${columns.length} span`).$}>
+              // Ensure the fallback message is the same width as the table
+              <div css={getTableRefWidthStyles(true)}>
                 <div css={{ ...style.firstRowMessageCss }}>{firstRowMessage}</div>
               </div>
             );
diff --git a/src/components/Table/utils/utils.tsx b/src/components/Table/utils/utils.tsx
index b3d3f836f..9d48a2524 100644
--- a/src/components/Table/utils/utils.tsx
+++ b/src/components/Table/utils/utils.tsx
@@ -301,3 +301,7 @@ export function recursivelyGetContainingRow<R extends Kinded>(
 
   return undefined;
 }
+
+export function getTableRefWidthStyles(isVirtual: boolean) {
+  return Css.w100.if(isVirtual).w("calc(100% - 20px)").$;
+}