Remove gap on the right side of Overview tab

[derekblank]

Resolves Automattic/dotcom-forge#6993

Proposed Changes

Removes gap on right side of Windows screen due scrollbarGutter style values.

Testing Instructions

1. Start Studio and navigate to Overview screen
2. For both platforms, observe gap on right side of screen is not present

Before

After

Windows	macOS

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[derekblank]

auto is the default value of scrollbarGutter. With minimum height fix in #124, reserving scrollbarGutter space with stable should no longer be needed on Windows. macOS should not be affected.

[sejas]

This Gutter was aded on purpose on https://github.com/Automattic/dotcom-forge/issues/5896 . The intention was to avoid shifting the start button when the scroll bar appears.

I tried to make appear the scroll bar in the "main" window and I couldn't. So I guess it's fine to remove the Gutter stable.

Here is how it looks for me:

@derekblank , what do you think about removing the Windows from this PR title? My reasoning is that this PR affects all platforms.

[derekblank]

Thanks for taking a look @sejas!

This Gutter was aded on purpose on https://github.com/Automattic/dotcom-forge/issues/5896 . The intention was to avoid shifting the start button when the scroll bar appears.
I tried to make appear the scroll bar in the "main" window and I couldn't. So I guess it's fine to remove the Gutter stable.

Thanks for the context - I did check the history of when the scrollbarGutter: 'stable' change was introduced to see if there were other reasons for including it. The minimum height on Windows was updated recently in #124. Now, in expected cases, the scrollbar should not appear in the main app window, so I agree the gutter style can be removed on the <main> window. (Also noting that the scrollbarGutter: stable style is still retained in the SiteMenu Sidebar).

What do you think about removing the Windows from this PR title? My reasoning is that this PR affects all platforms.

Agreed, updated. 👍 The gap only appears on Windows, but I did also test on macOS to check for unintended effects.

[wojtekn]

@derekblank will it still work fine if Settings gets scrollbar at some point?

[sejas]

If some section displays a scrollbar , then we will probably need to add the scrollbarGutter: 'stable', but we could add it in the divs that shift instead of adding them globally on the main element.

[derekblank]

Will it still work fine if Settings gets scrollbar at some point?

@wojtekn When testing this today, I noted that if a scrollbar is displayed on Windows, it would be considered part of the app-draggable area -- interacting with the scrollbar would drag the app window, no matter if scrollbarGutter: 'stable' is present or not.

Below is an example of adding some arbitrary content to make the Settings screen scroll on the y-axis to check the behavior. I am scrolling the Settings tab using mouse gestures on the window, but interacting with the scrollbar drags the window instead. (Note that this video is just a hypothetical example for a future case, and is not present on trunk.)

scrollbar.mov

If we expect the Settings screen to grow vertically and thus be able to scroll in the future (or any tab, for that matter), we should create an issue.

[wojtekn]

@derekblank, thanks for testing it. Let's go ahead and leave it for now, and we can address it when the tab content grows enough to require a scrollbar. I think what @sejas proposes above would be a way to go - it seems that in such a case, we should scroll only the tab content and not the whole main area:

If some section displays a scrollbar , then we will probably need to add the scrollbarGutter: 'stable', but we could add it in the divs that shift instead of adding them globally on the main element.