From 275762912806b93d849e8c829ff1d05a1f6f7ede Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Mon, 12 Oct 2026 14:10:14 +0200
Subject: [PATCH] u

---
 src/FillSpace.jsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/FillSpace.jsx b/src/FillSpace.jsx
index d8f80f7..db38d9b 100644
--- a/src/FillSpace.jsx
+++ b/src/FillSpace.jsx
@@ -21,6 +21,7 @@ import { alpha } from '@mui/material/styles';
  * @prop {number} [unfilteredCount] - Alias for totalCount.
  * @prop {(page: number) => void} [onPageChange] - Called on page change.
  * @prop {boolean} [virtualScrollbar=false] - Shows a synchronized scrollbar alongside pagination controls.
+ * @prop {boolean} [reserveScrollbar] - Reserves raceway space even when items do not overflow (defaults to true when virtualScrollbar is true).
  * @prop {boolean} [debug=false] - Dashed outline for layout debugging.
  * @prop {object} [sx] - Extra styles.
  */
@@ -411,6 +412,7 @@ class FillSpace extends Component {
       onPageChange,
       onWheel,
       virtualScrollbar = false,
+      reserveScrollbar,
       racewayMarginBottom,
       racewayRight,
       debug = false,
@@ -443,6 +445,10 @@ class FillSpace extends Component {
 
     const racewayBottom = Math.max(0, Number(racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
     const racewayRightOffset = racewayRight != null ? racewayRight : 0;
+    const scrollbarReserved = reserveScrollbar ?? Boolean(virtualScrollbar);
+    const scrollbarPadding = scrollbarReserved
+      ? `${Math.max(0, RACEWAY_WIDTH + racewayRightOffset + 8)}px`
+      : 0;
 
     let thumbHeight = 0;
     let thumbTop = 0;
@@ -514,7 +520,17 @@ class FillSpace extends Component {
             </Box>
           </Box>
         ) : null}
-        {header}
+        {header != null ? (
+          <Box
+            sx={{
+              width: '100%',
+              pr: scrollbarPadding,
+              boxSizing: 'border-box',
+            }}
+          >
+            {header}
+          </Box>
+        ) : null}
         <Box
           ref={(el) => {
             this.ref = el;
@@ -545,7 +561,7 @@ class FillSpace extends Component {
           <Box
             sx={{
               width: '100%',
-              pr: canScroll ? `${Math.max(0, RACEWAY_WIDTH + racewayRightOffset + 8)}px` : 0,
+              pr: scrollbarPadding,
               boxSizing: 'border-box',
             }}
           >