Fix Duplicate Vertical Scrollbars in Fixed Boards - Issue #1867

[katrinechow]

Summary: Removed line 63 overflow-y: scroll; from Board.css, in order to reduce double vertical scroll issue as outlined in #1867

This PR closes #1867

Issue: Double vertical scroll bars appears when board is in Fixed Board mode and row/column has been reduced such that the tiles are populating vertically, requiring vertical scroll

Steps to Reproduce (verified per steps from @RodriSanchez1):

1. Go to a folder of our default Cboard Classic Board. For example => (Sports)
2. Unlock and press Edit the board
3. Enable the "Fixed" switch on the Edit nav bar
4. Reduce the board size to 2 columns
5. Now you can see the scroll in a fixed board.

Device/OS: Chrome/Chromium-based browsers on Windows OS

Solution: Removed line 63 overflow-y: scroll; from Board.css

Reason: Grid is already managing scroll so this line doubled the effort

Verification Performed:

1. Tested on Chrome, Brave, FireFox, Microsoft Edge web browsers / Windows 11 OS
2. Tested on all existing Classic Boards
3. Tested on Universal Core 11x6 board
4. Tested with custom tiles added to existing boards
5. Tested with custom board (full board with only custom tiles)
6. Tested in Full screen mode
7. Tested with Fixed Boards and Fluent Boards
8. Tested with Fluent Boards and manually scaling browser window
9. Tested with multiple tabs opened at the same time, each tab with a different topic board
10. Tested with various combinations of grid sizes, with rows and columns set at 1 through 12

[RodriSanchez1]

Hello @katrinechow! 👋

Thank you so much for your contribution and for providing such a detailed PR description—really great job!

The change you made is working well—thank you! There’s just one improvement: We should always display the scroll bar on the right side of any board, even if it’s not being used. This might sound a bit odd, but it prevents a “jump” effect when switching between boards that have a scroll bar and those that don’t. If the scroll bar appears and disappears, the content shifts, and it can feel abrupt or “aggressive” to users. Keeping the scroll bar visible creates a smoother, more consistent experience.

Check what I mean on this video:

https://github.com/user-attachments/assets/cec912ee-f6d8-4d2b-a461-c9ef44979865

I have a suggestion help you make your PR even better and to align with some of our project’s best practices:

** Linking Issues Automatically** When you reference an issue in your PR, it’s super helpful to use special keywords like closes, fixes, or resolves before the issue number. For example, you can write:

closes #123

in your PR description. This way, GitHub will automatically close the related issue once your PR gets merged. It helps keep our project tidy and ensures everyone knows which issues have been addressed!

Let me know if you have any questions about these suggestions or if you need help making the adjustments—happy to help! 😊

Thanks again for your work and welcome to the project!

[katrinechow]

@RodriSanchez1 - Ooh I see what you mean. Let me work on keeping a consistent scrollbar (without duplicating!)

and thanks for the heads up about the issue link keywords. You have been very kind and this newbie truly appreciate your guidance!

[RodriSanchez1]

Sure thing! Take your time! I just merged the master on you branch, please make a pull before keep woking on it

[tomivm]

Hello @katrinechow and @RodriSanchez1! 👋

There was an unintentional push to the branch yesterday, which may have triggered some unexpected indicators. I've now restored the branch to its original state so that only @katrinechow's commit remains.

Let me know if you have any questions or run into any issues. Sorry for the inconvenience, and thanks for your understanding!

[RodriSanchez1]

@katrinechow Hi! How are you doing? Let me ask - will you be making the changes? No rush, just let me know. Also, let me know if you need any help!

[katrinechow]

@RodriSanchez1 - Hello! Sorry for the delay, I've been pulling overtime at work last week and had to pause on this, but am back to investigate! Is there a deadline to your next merge? I'll take a look today and tomorrow and see if I can figure out where to set the scrollbar to permanently show up

[katrinechow]

@RodriSanchez1 - I noticed that if I remove overflow control from Grid.module.css, I'm able to keep the vertical scroll bar displayed permanently in grey, even when there is no content overflow.

I attached a video here. Is this what you are looking for?

https://github.com/user-attachments/assets/bb47b579-38ce-4be0-bd99-97fdf4826c8d

[RodriSanchez1]

Yeah! Take your time! There is not deadline

Thanks for the video! That's exactly what we need. You should check if the fluent board still works okay.

To change to a fluent board disable the above check box

[katrinechow]

@RodriSanchez1 - I performed the same tests as described in my original PR comment. The fix seems to work on both Fixed and Fluent boards.

I did notice that on Firefox, the scrollbar (without content overflow) is not visible. I researched into this and the solution is for me to go into my Windows 11 settings and select "Always show scrollbars". If a user doesn't have this turned on in their OS, then they won't see the scrollbar permanently in Firefox. Would you have any suggestions here?

I pulled the latest updates from cboard Master to my fork, and then committed my most recent change to my katrinechow:fix/1867-Eliminate-Duplicate-Vertical-Scrollbars-in-Fixed-Boards branch. Please let me know if I need take any additional steps! Thanks so much :)

[RodriSanchez1]

Hello @katrinechow,

Sorry for the late response. I’ve just tested the changes and found a bug. When the big scroll buttons are enabled on a fixed board, they are not working.

How to enable:

How to test:

Press any of the vertical red scroll buttons. Unfortunately, they don’t work. :(

About Firefox: No issues here — the user should just use the default OS configuration. I tested it as well, and the scroll bar doesn’t affect the board width, so that’s all good.

Let me know if you need any more details! Thanks for your work on this

[katrinechow]

Just dropping a note that I am working on a potential solution, and will need to run through a few more test cases. Hoping to get an update in by end of week (or sooner)!

[katrinechow]

@RodriSanchez1 - Hello! I tested my latest commit again on Fixed grid, flex grid, classic board, Universal Core board, with, and without setting the Big Red scroll buttons. It works in my test environment. Would you please check on your end? Thank you!

[RodriSanchez1]

Hi @katrinechow It’s been a busy week. I will give you feedback soon

[magush27]

I tested this and it seems to be working fine now @RodriSanchez1

[RodriSanchez1]

I will close this PR as is not longer needed. Thanks @katrinechow for your work!