I've seen a few people already made other approaches to solve this, the problem being that other elements than the body might need the padding for the scrollbar gap as well, to prevent the otherwise visual glitch.
My solution to this, which in my opinion gives the user a more versatile way of adjusting for the gap where needed and without complicating things, would be to add a body class and a css variable to the root. These can then be used in any elements CSS needing the extra padding like so (assuming it's SCSS):
I've seen a few people already made other approaches to solve this, the problem being that other elements than the body might need the padding for the scrollbar gap as well, to prevent the otherwise visual glitch.
My solution to this, which in my opinion gives the user a more versatile way of adjusting for the gap where needed and without complicating things, would be to add a body class and a css variable to the root. These can then be used in any elements CSS needing the extra padding like so (assuming it's SCSS):