revert box-sizing

Author: mckervinc

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 1.4.2
+
+_2025-04-18_
+
+### Bugfix
+
+- revert `box-sizing`. This was causing an infinite loop in certain dialogs. Instead we multiply border height by two to fix vertical scroll bars appearing when borders are present and maxTableHeight is specified.
+
 ## 1.4.1
 
 _2025-04-18_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A React table inspired by @tanstack/react-virtual",
   "author": "Mckervin Ceme <mckervinc@live.com>",
   "license": "MIT",

src/AutoSizer.tsx

@@ -37,7 +37,7 @@ const estimateTableHeight = (
     maxHeight > 0 ? size : Math.min(size || ESTIMATED_NUM_ROWS, ESTIMATED_NUM_ROWS) + 1;
   const bodyHeight = numRows * rowHeight;
 
-  const result = headerHeight + bodyHeight + borderHeight + footerHeight;
+  const result = headerHeight + bodyHeight + borderHeight * 2 + footerHeight;
   return maxHeight > 0 ? Math.min(maxHeight, result) : result;
 };
 

src/components/List.tsx

@@ -137,7 +137,9 @@ function BaseList<T>(
       // compute
       const headerHeight = getElemHeight(headerRef.current, heightOfHeader, HEADER_HEIGHT);
       const footerHeight = getElemHeight(footerRef.current, heightOfFooter, FOOTER_HEIGHT);
-      return Math.min(headerHeight + bodyHeight! + footerHeight + borderHeight, maxTableHeight);
+      return (
+        Math.min(headerHeight + bodyHeight! + footerHeight + borderHeight * 2, maxTableHeight) + 2
+      );
     }
 
     return estimatedHeight;

src/styles/main.css

@@ -2,7 +2,6 @@
   display: grid;
   overflow: auto;
   contain: strict;
-  box-sizing: content-box;
   grid-template-rows: auto 1fr auto;
 }