FE-1182: Show horizontal scrollbar in entities table view

[claude]

Requested by Tim Diekmann · Slack thread

🌟 What is the purpose of this PR?

Before: on the /entities page table view, there is no horizontal scrollbar whenever the "Show more entities" bar is present (i.e. whenever more rows are available than the 500 loaded), so columns wider than the viewport are unreachable by scrollbar.

After: the grid's native horizontal scrollbar is visible at the bottom of the table, above the "Show more entities" bar, and all columns are reachable.

How: the "Show more entities" bar was rendered position: absolute over the bottom of the grid, offset upwards by a scrollbar height that was measured only once, from the first .dvn-scroller in the document, in an effect keyed on rows.length. That measurement is 0 whenever the effect runs before the grid's scroller has mounted (glide-data-grid renders an empty placeholder until its ResizeObserver reports a size, and rows.length never changes again to re-trigger the effect), and always 0 with overlay scrollbars (macOS). With a measurement of 0, the 60px white bar sat at bottom: 0 and covered the grid's horizontal scrollbar completely. This PR renders the bar in normal flow below the grid instead, shrinking the grid by the bar's height so the total footprint is unchanged, and deletes the scrollbar-size measurement and the experimental.paddingBottom overlay compensation entirely. This avoids any scrollbar-size measurement, so it cannot reintroduce the measurement feedback loop being removed from useScrollLock in #8995.

🔗 Related links

• Reported in Slack (internal)
• Not related to FE-1181: Fix entity slide-over jitter from scroll-lock feedback loop #8995 (scroll-lock only touches document.body, and the grid scrolls inside its own .dvn-scroller); the overlay pattern predates the recent entities-visualizer refactors, and H-6512, H-6625: Improve loading, org invites, action bell routing #8917 made it show based on nextCursor != null.

🚫 Blocked by

Nothing.

🔍 What does this change?

• apps/hash-frontend/src/pages/shared/entities-visualizer/entities-table.tsx:
  • removed the horizontalScrollbarHeight/verticalScrollbarWidth state and the one-shot document.querySelector(".dvn-scroller") measurement effect
  • the "Show more entities" Stack is now a normal flow child below the Grid (no position: absolute / bottom / width compensation)
  • the Grid height subtracts the bar height when the bar is shown, keeping the table's total height budget
  • dropped experimental.paddingBottom, which existed only to keep the last row visible under the overlaid bar

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

⚠️ Known issues

• The bar now sits below the grid's rounded bottom corners instead of covering them; visually it remains attached via its top border and white background.

🐾 Next steps

• Verify whether queryEntitySubgraph returns a non-null cursor on the final page: if so, the "Show more entities" bar (and a no-op fetch) shows even when everything is already loaded — worth a separate follow-up.

🛡 What tests cover this?

• None automated; the change is layout-only in a component without existing tests.

❓ How to test this?

1. Open /entities in a web with more than 500 entities (so the "Show more entities" bar appears).
2. Confirm a horizontal scrollbar is visible at the bottom of the grid, above the "Show more entities" bar, and that dragging it reaches the rightmost columns.
3. Click "Show more entities" and confirm rows append and the scrollbar remains.
4. Check a result set under 500 entities: no bar, grid at full height, scrollbar unchanged.

📹 Demo

N/A (no screenshot available; reporter could not provide one either).

🤖 Generated with Claude Code

https://claude.ai/code/session_01243QS3xBEGK8T8fmZ4PMeA

---

Generated by Claude Code

Linear issue: FE-1182

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	Jul 9, 2026 5:10pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored		Jul 9, 2026 5:10pm
petrinaut	Skipped		Jul 9, 2026 5:10pm

[cursor]

PR Summary

Low Risk
Layout-only change in entities-table.tsx with no auth, data, or API impact; known minor visual trade-off at the grid’s bottom corners.

Overview
Fixes the entities table horizontal scrollbar when the “Show more entities” bar is shown (500+ entities).

The load-more bar no longer uses absolute positioning over the bottom of the grid. It sits in normal document flow under the Grid, and the grid height subtracts the 60px bar when hasMoreRowsAvailable so the overall layout budget stays the same.

Removed the one-shot .dvn-scroller scrollbar measurement (useEffect + state) and experimental.paddingBottom on Grid, which existed to keep rows visible under the overlaid bar. Those approaches often measured 0 (timing, macOS overlay scrollbars) and the bar covered the native horizontal scrollbar.

^{Reviewed by Cursor Bugbot for commit bb754ce. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit bb754ce. Configure here.}

[cursor]

Six hundred cap ignores bar

Low Severity

When hasMoreRowsAvailable is true, the grid height uses min(calc(${maxHeight} - 60px), 600px) while the load-more bar adds another 60px in normal flow. If maxHeight is above 600px, the inner min still fixes the grid at 600px, so the stack grows by 60px versus the previous overlaid bar layout.

 

^{Reviewed by Cursor Bugbot for commit bb754ce. Configure here.}

[claude]

Accurate observation, leaving it for reviewers to judge: the stack never exceeds the available height (maxHeight already accounts for the viewport), so this only makes the widget up to 660px instead of 600px on tall viewports, showing more rows. If the old 600px total cap is preferred, the change is min(calc(${maxHeight} - 60px), 600px) → calc(min(${maxHeight}, 600px) - 60px).