Vertical scrollbar is shown inside the horizontally scrollable area, which makes it usually out of sight

[mathieulb]

New Issue Checklist

• [x] I am not disclosing a vulnerability.
• [x] I am not just asking a question.
• [x] I have searched through existing issues.
• [x] I can reproduce the issue with the latest versions of Parse Server and Parse Dashboard.

Issue Description

To see the vertical scrollbar, one has to scroll to the far right of the table, not on the screen, because many tables have many columns, and by going there, one no longer sees whatever horizontal position they were at, and in very wide tables, it may take a while to go back to the spot they were originally at, before looking at the scrollbar. Parse Dashboard is the only app I know that does this (among the ones kind enough to display a scrollbar).

Steps to reproduce

Open any table where columns take more than one screen wide, in any version of Parse Dashboard.

Actual Outcome

Vertical scrollbar only appears when horizontal scrollbar at maximum position (right end).

Expected Outcome

Vertical scrollbar always visible.

Environment

Dashboard

• Parse Dashboard version: both 2.1.0 release and in 4.0.0 release.
• Browser (Safari, Chrome, Firefox, Edge, etc.): Firefox
• Browser version: 97 and several previous ones

Server

• Parse Server version: 4.3.0
• Operating system: Heroku 18
• Local or remote host (AWS, Azure, Google Cloud, Heroku, Digital Ocean, etc): Heroku

Database

• System (MongoDB or Postgres): Mongo
• Database version: ?
• Local or remote host (MongoDB Atlas, mLab, AWS, Azure, Google Cloud, etc): Heroku

[parse-github-assistant[bot]]

Thanks for opening this issue!

• 🚀 You can help us to fix this issue faster by opening a pull request with a failing test. See our Contribution Guide for how to make a pull request, or read our New Contributor's Guide if this is your first time contributing.

[mathieulb]

... or to be consistent with the rest of scrollbar policy, [Expected Outcome] = Vertical scrollbar visible whenever the table's content is higher than its viewport. My only point is only that you should be using a scrollable area with two scrollbars, instead of a vertically scrollable area nested within a horizontally scrollable area.

[parseplatformorg]

🎉 This change has been released in version 5.2.0-alpha.15

[mtrezza]

Re-opened because #2457 has been reverted with https://github.com/parse-community/parse-dashboard/pull/2476 because it introduced bug https://github.com/parse-community/parse-dashboard/issues/2475.

[AshishBarvaliya]

2475

I attempted to reproduce the issue by adding 3x additional rows and columns, but I couldn't observe the change in the image you posted. It appears that the width has been somehow altered. Generally, the default width remains consistent regardless of the number of columns added. Could you please provide me with the specific values you modified or added to increase the width?

[mtrezza]

I did not do any modification actually, I was able to reproduce this issue even in the preview. I'll try to reproduce and give you more details. Opened https://github.com/parse-community/parse-dashboard/pull/2486 to demo.

[parseplatformorg]

🎉 This change has been released in version 5.3.0-beta.1

[parseplatformorg]

🎉 This change has been released in version 5.3.0-alpha.1

[parseplatformorg]

🎉 This change has been released in version 5.3.0