Grid: Fix resizing in Firefox

[hoorayimhelping]

Helps with: https://github.com/ClickHouse/control-plane/issues/9726
Helps with: #422

See: #455

There were several issues with the Grid in Firefox. This PR addresses three of them:

• Grid resizing just didn't happen in Firefox
• When attempting to resize, the drag handle woudl fly to the right and blow up the horizontal scrollbar
• After fixing the above issues, the drag handle on Firefox was in a different location than Chrome

The fixes:

• There was a conditional check that didn't run when a value that could be 0 in Firefox came back as falsy, thus Firefox would never actually save the new column position. The fix was allowing 0 values in the if statement.
• Firefox calculated the size of the resize header based on event.scrollWidth. For some reason, in Firefox, this width was being calculated based on the previous width. This led to an exponential growth in Firefox when increasing the size of a header - the previous width would be used in the new width calculation, which would then be used in the next width calculation, which caused the right scroll bar to expand very quickly. This was fixed by calculating the width based on event.clientWidth, rather than scrollWidth.
• Firefox was not properly applying the :active pseudo class, so the width calculation was incorrect. This was fixed by keeping track of the active state in React based on mouse presses and releases, and passing that value into styledComponents

There was also an a11y fix for Scrollable region must have keyboard access

New behavior in Firefox

Screen.Recording.2024-07-26.at.11.30.12.AM.mov

New behavior in Chrome

Screen.Recording.2024-07-26.at.11.30.50.AM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 26, 2024 3:41pm