Correct form padding and round corners in Firefox

[grantfitzsimmons]

Fixes #3189

Instructions to test:

• Make sure that all areas with scrollbars display properly in Firefox and Chrome.
• Make sure that corners on elements with scrollbars are still rounded
• Make sure that padding is equal on both the left and right on forms

It shouldn't look like this:

[melton-jason]

I would heavily defer the decision to say this is a good change or not to @specify/ux-testing:
It is fine as far as the code is concerned, though maybe [scrollbar-gutter:auto] might not be needed because it is the initial, default value. Need to look into this more, but it's not a bad decision to be declarative.
Maybe an approach like that taken in this StackOverflow answer may be worth considering as well

I can describe what these changes do, to give @specify/ux-testing a better idea on what to test.

scrollbar-gutter is a CSS property used to control how space is reserved for the scroll-bar.
We changed it from stable to auto.
Stable made it so that the space for the scroll-bar should have always been reserved, even if a scroll-bar is not needed.
Auto makes it so that space is only reserved for the scroll-bar when it is needed (when the contents are overflowing and we tell the browser to display a scrollbar)

See if these changes look okay on various screen widths: there should not be a drastic shifting of contents to accommodate a scroll-bar that is suddenly needed.

[bronwyncombs]

Looks good 👍

Screen.Recording.2023-07-24.at.10.41.33.AM.mov

Screen.Recording.2023-07-24.at.10.49.42.AM.mov

[maxpatiiuk]

scrollbar-gutter:auto is the default value, so you can just remove that class name

---

scrollbar-gutter was useful at one point to reduce needless UI shifts (expand/collapse something inside the container or go between records), but if rounded corners are a bigger issue then ok

[maxpatiiuk]

Also, perhaps overflow:auto would be a better solution - it would make scrollbars display on top of content in some modern browsers, thus removing the UI shift issue, and removing the persistent scroll bars issue

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#:~:text=a%20scroll%20container.-,auto,drawn%20on%20top%20of%20the%20content%20instead%20of%20taking%20up%20space.,-Description

edit:
looks like it already does that:

overflow-scroll overflow-x-auto [overflow-y:overlay]

(it sets both directions to scroll, for browsers that don't support overlay, but then overwrites that)

thus removing scrollbar-gutter completely, or being explicit like @melton-jason suggested and leaving it there is fine