Improve RTL layouts

[derekblank]

Resolves Automattic/dotcom-forge#6375

Proposed Changes

Improves support for RTL layouts by updating compatible padding, margin, and spacing values when RTL languages are used.

Testing Instructions

1. Change system locale to an RTL language, like Hebrew. (Steps to change system locale on macOS, for example.)
2. Test and observe the following RTL layout-based issues are not present:

Change 1: Mirror the action button icon

Before	After

Change 2: Add padding to Content tab

Before	After

Change 3: Fix label spacing and alignment on Settings tab

Before	After

Change 4: Updates ScreenshotDemoSite background

Before	After

Known issues not addressed in this PR

• https://github.com/Automattic/dotcom-forge/issues/6662
• https://github.com/Automattic/dotcom-forge/issues/6805 (text overflow in sidebar)

Pre-merge Checklist

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

[wojtekn]

@derekblank, as we are fixing support for RTL, should we fix the missing left black border, which seems to be the biggest difference between LTR and RTL?

[matt-west]

as we are fixing support for RTL, should we fix the missing left black border, which seems to be the biggest difference between LTR and RTL?

+1

We'd need to remove the LTR padding from the right side too. The border above the add site button should span the full-width between the content pane and the edge of the window.

[derekblank]

As we are fixing support for RTL, should we fix the missing left black border, which seems to be the biggest difference between LTR and RTL?
We'd need to remove the LTR padding from the right side too. The border above the add site button should span the full-width between the content pane and the edge of the window.

Updated for both. 👍

[wojtekn]

Thanks @derekblank , it looks great for RTL language now.