Left sidebar content overflows on Firefox (sometimes)

[andrewtavis]

Terms

• I have searched all open bug reports
• I agree to follow activist's Code of Conduct

Behavior

There's been a consistent issue with the left sidebar content in Firefox that sometimes the content overflows over the right side and sometimes it doesn't. See an example of when it's problematic below for activist.org/organizations/123/about:

Some details on this:

• I do not see this on Firefox on Mac, but another person does (above screenshot is from a Mac)
• I do see this on Firefox on Linux
• Another contributor sees this on Windows

It would be really great to get some support from someone for this! Happy to assist as needed or get to it myself in a little bit :)

[andrewtavis]

For someone to work on this, it'd be great if they'd confirm that they can reproduce the error as it's not gonna be very effective if they can't :)

[atilagulers]

I'll check it!

[atilagulers]

I looked but I didn't encounter any bugs :)

[andrewtavis]

Hey @atilagulers 👋 Appreciate you taking a look at this! I decided to give it a go after a core team meeting we just had :) The above commits make progress on this, but ultimately we still have some serious problems that might not be able to be fixed given the current implementation.

To document my findings:

• A fundamental problem here is differences between scrollbar behavior in Chromium based browsers and Firefox
  • Properties for the Tailwind scrollbar extension we're using cannot be applied to each
  • Widths are not consistent
  • Padding of the scrollbar thumb to its track is not consistent
• Specifically for Firefox
  • Different distributions behave differently with some having unintended hover actions on the scrollbar, differences in margins being applied, and countless other minor details that mean that universal alignment is impossible

What's been done:

• We're no longer checking for Firefox, but rather if the field is scrollable
• We're checking whether the left sidebar content is scrollable on mouse entry, leave and when the toggle is pressed
• Dimensions have been changed so that they're not perfect for anything, but not completely out of line as before
• Many more minor fixes

We seem to be faced with a question of whether we want to make a scrollbar component as there really doesn't seem to be a way to get this working 🤦‍♂️🤦‍♂️

A final check is actually to manually look at what the width of the sidebar content is, and if it's found to be expanding beyond the bounds of the sidebar then to make it more narrow.

[andrewtavis]

After sleeping on this, even the manual check isn't going to help too much in regards to the styling changing on Firefox for Linux. I'll close this and make a custom component issue.