Ensure only bordering areas of app are draggable

[SiobhyB]

Related to 6805-gh-Automattic/dotcom-forge#issuecomment-2089930508

Proposed Changes

• Following the feedback at 6805-gh-Automattic/dotcom-forge#issuecomment-2089930508, tweaks have been made so that the space between the app's sidebar the and its main content area is no longer draggable.
• Instead, it should only be possible to click and drag the bordering areas of the app. The left sidebar remains draggable, also.

Testing Instructions

Verify only bordering areas of the app are draggable

• The space between the sidebar and the app's content should no longer be draggable.
• It should be possible to click and drag any bordering area of the app, including the main sidebar to the left.

Ensure no changes to layout

As this PR tweaks some of the CSS used in the app's main content area, we should also verify that there are no unwanted changes to the app's general layout:

Before	After

Pre-merge Checklist

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

[derekblank]

LGTM! 🚀

I observed that:

• The targeted bordering areas of the app were draggable
• Layout issues were not introduced (including checking RTL layouts)

[katinthehatsite]

The changes look good to me. I confirm that I saw the region around app borders was draggable along with the sidebar 👍 Nice work!

[wojtekn]

@SiobhyB I still can't make it work. I marked areas that are draggable for me, and used arrow to show the one that doesn't work:

[katinthehatsite]

Actually, I re-tested it and confirm that I see the same thing as Wojtek for the left side of the sidebar. All the other areas seem to work as expected for me.

[wojtekn]

While testing this branch, I also noticed that scrolling sites list down makes the top left area not draggable:

This happens on the trunk, too, so it looks like it is unrelated to changes from this branch.

[SiobhyB]

@wojtekn, thanks for the screenshot! I had been testing with only one local site, which is why I wasn't experiencing the issue with the left border not being draggable, I've been able to reproduce what you're seeing after adding a long list of sites.

I've addressed this in 0db7235. Let me know if that resolves what you're seeing!

@fluiddot, would you be able to verify this doesn't result in any unwanted layout shifts in Windows, too? I'd be grateful for the testing as this latest change involves different margins for Windows. 🙇‍♀️

[SiobhyB]

While testing this branch, I also noticed that scrolling sites list down makes the top left area not draggable

@wojtekn, I wasn't able to reproduce that issue with the latest changes. Here's what I'm seeing:

Screen.Recording.2024-05-07.at.09.58.03.mov

Are you still able to reproduce?

[wojtekn]

thanks for the screenshot! I had been testing with only one local site, which is why I wasn't experiencing the issue with the left border not being draggable, I've been able to reproduce what you're seeing after adding a long list of sites.

Thanks, it works well now - I can use left border to drag, too.

I wasn't able to reproduce that issue with the latest changes. Here's what I'm seeing:

I can reproduce it in the trunk, but this branch fixes that.

[fluiddot]

@fluiddot, would you be able to verify this doesn't result in any unwanted layout shifts in Windows, too? I'd be grateful for the testing as this latest change involves different margins for Windows. 🙇‍♀️

Sure, I'm going to test it and report back.

[fluiddot]

@fluiddot, would you be able to verify this doesn't result in any unwanted layout shifts in Windows, too? I'd be grateful for the testing as this latest change involves different margins for Windows. 🙇‍♀️

Sure, I'm going to test it and report back.

@SiobhyB I've tested the PR on Windows and haven't noticed any changes in the layout. Additionally, I tested the draggable regions and confirmed it works as described in the PR 🎊 .

[SiobhyB]

@wojtekn, @fluiddot, awesome, thanks so much! I'll go ahead to merge 🚀

[dcalhoun]

👋🏻 @SiobhyB I noticed these changes slightly crop the focus outline style for the sites navigation. Would you be willing to explore if this is straightforward to rectify please? 🙇🏻

Before	After

[SiobhyB]

@dcalhoun, thank you for catching that! I've opened #102 to address it. 🙇‍♀️