fix: Keep vertical scrollbar visible in data browser with wide tables

[PreviousGod]

Closes #2045

Approach

Move vertical and horizontal scrolling to the .table container instead of .browser.

Problem

.browser (position: fixed) handled both overflow axes via overflow: auto. The vertical scrollbar was positioned at the right edge of the scrollable content area — when a table had many columns, users had to scroll all the way to the right to access the vertical scrollbar.

Fix

Delegate scrolling to .table (absolutely positioned child inside .browser) by adding overflow: auto to it. .browser now uses overflow: hidden, acting only as a positioning container.

Since .table has width: 100% of .browser (which is position: fixed; left: 300px; right: 0), .table's right edge = .browser's right edge = viewport edge. The vertical scrollbar is always visible at the viewport edge regardless of table width.

Changes

Only Browser.scss — 2 lines changed.

• .browser: overflow: auto → overflow: hidden
• .table: added overflow: auto

Additional benefit

tableRef.current.scrollTop = 0 in componentWillReceiveProps now correctly works — .table is now the actual scroll container, whereas before overflow: visible on .table made the scroll reset effectively a no-op.

Summary by CodeRabbit

• Style
  • Improved scrolling behavior in the data browser interface. The table region now enables independent scrolling while maintaining the fixed container layout for better usability.

[parse-github-assistant]

I will reformat the title to use the proper commit message syntax.

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

Tip

• Keep pull requests small. Large PRs will be rejected. Break complex features into smaller, incremental PRs.
• Use Test Driven Development. Write failing tests before implementing functionality. Ensure tests pass.
• Group code into logical blocks. Add a short comment before each block to explain its purpose.
• We offer conceptual guidance. Coding is up to you. PRs must be merge-ready for human review.
• Our review focuses on concept, not quality. PRs with code issues will be rejected. Use an AI agent.
• Human review time is precious. Avoid review ping-pong. Inspect and test your AI-generated code.

Note

Please respond to review comments from AI agents just like you would to comments from a human reviewer. Let the reviewer resolve their own comments, unless they have reviewed and accepted your commit, or agreed with your explanation for why the feedback was incorrect.

Caution

Pull requests must be written using an AI agent with human supervision. Pull requests written entirely by a human will likely be rejected, because of lower code quality, higher review effort and the higher risk of introducing bugs. Please note that AI review comments on this pull request alone do not satisfy this requirement. Our CI and AI review are safeguards, not development tools. If many issues are flagged, rethink your development approach. Invest more effort in planning and design rather than using review cycles to fix low-quality code.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1f285be7-7a45-4a08-8e86-d0d779652742

📥 Commits

Reviewing files that changed from the base of the PR and between 5f0c479 and 0880c7f.

📒 Files selected for processing (1)

• src/dashboard/Data/Browser/Browser.scss

---

📝 Walkthrough

Walkthrough

The PR modifies the data browser's CSS to redistribute scrolling behavior from the outer .browser container to the inner .table container, preventing the vertical scrollbar from being hidden behind the horizontally scrollable area.

Changes

Table scrolling behavior

Layer / File(s)	Summary
Scrolling behavior reallocation src/dashboard/Data/Browser/Browser.scss	The .browser container's overflow changes from auto to hidden, while .table gains overflow: auto, moving scrolling responsibility from the outer fixed container to the table region.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• parse-community/parse-dashboard#3067: Modifies data browser table styling including will-change and header bar layout related to scrolling behavior.
• parse-community/parse-dashboard#3112: Adjusts data browser layout and scrolling to prevent the graph panel from obscuring table columns.

🚥 Pre-merge checks | ✅ 6 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Engage In Review Feedback	❓ Inconclusive	No review feedback or discussion comments found in the repository or git history. Cannot assess engagement with review feedback without access to actual PR comments.	This check requires access to GitHub PR review comments and discussions. The local repository contains only the committed code with no review history accessible.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title begins with the required 'fix:' prefix and clearly summarizes the main change: keeping the vertical scrollbar visible in the data browser with wide tables.
Description check	✅ Passed	The description provides a comprehensive explanation of the problem, fix, and changes with clear sections covering approach, problem analysis, and the specific modifications made.
Linked Issues check	✅ Passed	The PR directly addresses issue #2045 by implementing the expected outcome: making the vertical scrollbar always visible by moving overflow handling from the fixed .browser container to the .table container.
Out of Scope Changes check	✅ Passed	All changes are scoped to the Browser.scss file and directly address the scrolling behavior issue described in #2045 with no extraneous modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Security Check	✅ Passed	CSS overflow property changes pose no security vulnerabilities. No javascript: protocols, XSS vectors, CSS injection, or sensitive data handling detected. Pure layout fix.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.11.0)

src/dashboard/Data/Browser/Browser.scss

NoFilesFoundError: No files matching the pattern "src/dashboard/Data/Browser/Browser.scss" were found.
at standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:323:43)
at process.processTicksAndRejections (node:internal/process/task_queues:104:5)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}