From bb754ce95e768a4aeeee220c6980e452148557da Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 9 Jul 2026 17:01:17 +0000
Subject: [PATCH] Fix hidden horizontal scrollbar on entities table view

The 'Show more entities' bar was absolutely positioned over the bottom of
the grid, offset by a scrollbar height measured once from the first
.dvn-scroller in the document. The measurement was 0 whenever the effect
ran before the grid's scroller mounted (and always with overlay
scrollbars), so the bar sat at bottom: 0 and covered the grid's native
horizontal scrollbar, leaving columns unreachable by scrollbar.

Render the bar in normal flow below the grid instead, shrinking the grid
by the bar's height so the total footprint is unchanged. This removes the
scrollbar measurement and the experimental paddingBottom overlay
compensation entirely.

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01243QS3xBEGK8T8fmZ4PMeA
---
 .../entities-visualizer/entities-table.tsx    | 47 ++++++-------------
 1 file changed, 14 insertions(+), 33 deletions(-)

diff --git a/apps/hash-frontend/src/pages/shared/entities-visualizer/entities-table.tsx b/apps/hash-frontend/src/pages/shared/entities-visualizer/entities-table.tsx
index 2c0d8c27d1e..1f273472cb9 100644
--- a/apps/hash-frontend/src/pages/shared/entities-visualizer/entities-table.tsx
+++ b/apps/hash-frontend/src/pages/shared/entities-visualizer/entities-table.tsx
@@ -3,7 +3,7 @@ import { GridCellKind } from "@glideapps/glide-data-grid";
 import { Box, Stack, useTheme } from "@mui/material";
 import * as Sentry from "@sentry/nextjs";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import {
   extractBaseUrl,
@@ -788,30 +788,6 @@ export const EntitiesTable: FunctionComponent<
     webNameByWebId,
   ]);
 
-  const [
-    { horizontalScrollbarHeight, verticalScrollbarWidth },
-    setScrollbarSizes,
-  ] = useState({
-    horizontalScrollbarHeight: 0,
-    verticalScrollbarWidth: 0,
-  });
-
-  useEffect(() => {
-    const gridEl = document.querySelector<HTMLElement>(".dvn-scroller");
-
-    if (!gridEl) {
-      return;
-    }
-
-    const scrollbarHeight = gridEl.offsetHeight - gridEl.clientHeight;
-    const scrollbarWidth = gridEl.offsetWidth - gridEl.clientWidth;
-
-    setScrollbarSizes({
-      horizontalScrollbarHeight: scrollbarHeight,
-      verticalScrollbarWidth: scrollbarWidth,
-    });
-  }, [rows.length]);
-
   const loadMoreRowHeight = 60;
 
   return (
@@ -824,7 +800,7 @@ export const EntitiesTable: FunctionComponent<
         sort={sort}
         setSort={setSortWithConversion}
       />
-      <Stack sx={{ gap: 1, position: "relative" }}>
+      <Stack>
         <Grid
           activeConversions={activeConversions}
           columns={columns}
@@ -834,12 +810,19 @@ export const EntitiesTable: FunctionComponent<
           customRenderers={customRenderers}
           dataLoading={false}
           enableCheckboxSelection
-          experimental={{
-            paddingBottom: hasMoreRowsAvailable ? loadMoreRowHeight : 0,
-          }}
           firstColumnLeftPadding={firstColumnLeftPadding}
           freezeColumns={1}
-          height={`min(${maxHeight}, 600px)`}
+          height={
+            /**
+             * When the 'Show more entities' bar is visible it takes up part of the
+             * available height, so the grid shrinks to leave room for it in the flow.
+             * The bar must not be overlaid on top of the grid, because it would cover
+             * the grid's horizontal scrollbar.
+             */
+            hasMoreRowsAvailable
+              ? `min(calc(${maxHeight} - ${loadMoreRowHeight}px), 600px)`
+              : `min(${maxHeight}, 600px)`
+          }
           onConversionTargetSelected={onConversionTargetSelected}
           onSearchClose={() => setShowSearch(false)}
           onSelectedRowsChange={(updatedSelectedRows) =>
@@ -861,10 +844,8 @@ export const EntitiesTable: FunctionComponent<
               background: palette.common.white,
               borderTop: `1px solid ${palette.gray[20]}`,
               height: loadMoreRowHeight,
-              position: "absolute",
-              bottom: horizontalScrollbarHeight,
               p: 1,
-              width: `calc(100% - ${verticalScrollbarWidth}px)`,
+              width: "100%",
             })}
           >
             <Button