Fix: Disable horizontal scroll in large boards (Fixes #1786)

[Thermo041]

Fix: Disable horizontal scroll in large boards (Fixes #1786)

Summary: Fixes #1786 by applying CSS rules to prevent horizontal scrolling in large boards.

Changes Made:

• Updated Board.css and index.css to use:
  • overflow-x: hidden;
  • max-width: 100vw;
• Verified using DevTools that no elements overflow the viewport.

Tested On:

• ✅ Chrome
• ✅ Firefox

Horizontal scrollbar is now removed, resolving the issue.

Fixes #1786

[Thermo041]

Hi! Apologies for not commenting earlier — I noticed this issue and already created a fix. I’m new to open-source and still learning the process. Please review my PR (#1971) when you get time. I'd love to improve it if needed. Thanks!

[magush27]

Hi @Thermo041! Thanks for taking the time to work on this issue and for your contribution. I appreciate your effort as a newcomer to open source!

After reviewing this PR, I have some concerns that need to be addressed before it can be merged:

Issues Found

1. CSS selectors The CSS rules in index.css are too broad and could break other parts of the application:

  div[style*='1466px'],
  div[style*='200%'],
  div[style*='scroll'] {
    display: none;
  }

These selectors will hide any div containing these strings in inline styles, which could cause unpredictable behavior throughout the app.

2. Unrelated package changes The PR includes changes that aren't related to fixing the scroll issue:

• Downgrading @playwright/test from 1.53.0 to 1.50.0
• Adding browserstack-node-sdk
• Large package-lock.json/yarn.lock changes

These should be removed.

3. It doesn't address the core accessibility need Looking back at the original issue #1786, the speech therapist requested a way to help students with motor difficulties who struggle with scrolling. They specifically asked for: "access the symbols via pages? (E.g. select a button for 'Next Page' and disabling the scrolling on the screen?)". Only hiding the horizontal scrollbar doesn't solve the accessibility problem because users with motor difficulties still need an alternative way to navigate large boards.

Suggested alternative approach: I'd recommend closing this PR and implementing a proper solution that gives users choice: Add a Settings Toggle

• Add a new setting: "Board Navigation Mode" with options:
  • Scroll (default, current behavior)
  • Pagination (new feature with page navigation buttons)

Pagination Implementation When pagination mode is enabled:

• Calculate tiles per page based on grid size
• Add "Previous Page" / "Next Page" buttons
• Disable scrolling (overflow: hidden)
• Show page indicator (e.g., "Page 2 of 5")

This would properly address the accessibility needs mentioned in #1786 while maintaining backward compatibility for users who prefer scrolling.