u

src/FillSpace.jsx

@@ -475,6 +475,7 @@ class FillSpace extends Component {
       onWheel,
       virtualScrollbar = false,
       racewayMarginBottom,
+      racewayRight,
       debug = false,
       items,
       renderItem,
@@ -537,6 +538,7 @@ class FillSpace extends Component {
       total * unitHeight > viewportHeight;
 
     const racewayBottom = Math.max(0, Number(racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
+    const racewayRightOffset = racewayRight != null ? racewayRight : -(RACEWAY_WIDTH - 8);
 
     let thumbHeight = 0;
     let thumbTop = 0;
@@ -620,8 +622,8 @@ class FillSpace extends Component {
             sx,
             debug
               ? (theme) => ({
-                  outline: `2px dashed ${theme.palette.primary.main}`,
+                outline: `2px dashed ${theme.palette.primary.main}`,
-                })
+              })
               : undefined,
           ]}
         >
@@ -649,14 +651,14 @@ class FillSpace extends Component {
             <Box
               sx={{
                 width: '100%',
-                pr: canScroll ? `${RACEWAY_WIDTH + 8}px` : 0,
+                pr: canScroll ? 1 : 0,
                 boxSizing: 'border-box',
                 ...(virtualScrollbar && unitHeight > 0
                   ? {
-                      paddingTop: `${paddingTop}px`,
+                    paddingTop: `${paddingTop}px`,
-                      paddingBottom: `${paddingBottom}px`,
+                    paddingBottom: `${paddingBottom}px`,
-                      minHeight: totalContentHeight,
+                    minHeight: totalContentHeight,
-                    }
+                  }
                   : {}),
               }}
             >
@@ -701,7 +703,7 @@ class FillSpace extends Component {
               sx={{
                 position: 'absolute',
                 top: 0,
-                right: 3,
+                right: racewayRightOffset,
                 bottom: `${racewayBottom}px`,
                 width: RACEWAY_WIDTH,
                 zIndex: 5,