Use `scrollbar-gutter: stable both-edges;` CSS in the Settings' `div#container` to fix the unwanted layout changes caused by the the scrollbar.

[ghost]

Platforms

Linux, macOS, Windows

Description

This is the issue found in Settings, where some Setting pages will have a scrollbar and others don't, shifting the content to the left and creating a really distracting annoying behavior.

https://github.com/brave/brave-browser/assets/156715894/44ff714d-ab8e-4bf2-9793-22f4508d1653

Since Chromium 121 scrollbar styling CSS properties has been supported:

• scrollbar-width
• scrollbar-color
• scrollbar-gutter

using scrollbar-gutter: stable both-edges; will easily fix the issue since it reserve space for the scrollbar,

https://github.com/brave/brave-browser/assets/156715894/4c90c25e-46b4-4b25-8b46-2c620c7eb2b8

both-edges is the one that should be used because of the low size Settings window that. Without it, it will not look right/centered in the settings that don't have scrollbar, so that's why I specifically added added it as part of the request.

scrollbar-gutter: stable both-edges;	scrollbar-gutter: stable;

It is an easy fix, and it's time for Brave to fix this annoying unwanted layout change because of the scrollbar.

[ghost]

I don't know if this fits a 'request' or 'issue' because it is a terrible behavior, it should be fixed, but I already submitted it as Feature Request and can't change it. But it should be an issue, since it's really annoying when doing "shields" stuff and navigating around settings from private to shields and this and that and making tests because I have to report a bug with Vertical tabs or something and then I go to the long list of Appearance too,

[ghost]

In 2024 these unwanted layout change shouldn't exist and less in Brave settings, it looks bad for a serious fork to have this seizure inducive behavior, of moving the content only because there is a scrollbar.