Dashboard welcome panel image overlaps text in RTL

[ryelle]

The "6.0" graphic is not repositioned when an RTL language is used, so the image ends up overlapping the heading & subtitle.

[hellofromTonya]

Test Report

Patch tested: 55793.diff​

How to read this report:

✅ <= Behavior is expected.
❌ <= Behavior is NOT expected.

Environment

• OS: macOS Big Sur
• Web Server: wp-env
• WordPress: 6.0 branch
• Browser: Firefox 100.0
• Theme: Twenty Twenty-Two
• Active Plugins: None

Steps to Test Patch

1. Go to Settings > General.
2. Select a RTL language.
3. Checkout the 6.0 branch.
4. Go to Dashboard.
5. Notice the header place.
6. Applied the patch against the 6.0 branch
7. Rebuilt via

   npm run build:dev
   npm run env:start
   npm run env:install
   

8. Bust the browser cache.
9. Check if the bug is resolved.

Test Results

• 🐞 Can reproduce the bug
• ✅ Issue resolved with patch.

[hellofromTonya]

Issue resolved after applying the patch.

[ironprogrammer]

Test Report

55793.diff

Report Legend:
✅ <= Behavior is expected.
❌ <= Behavior is NOT expected.

Environment

• macOS 12.3.1
• PHP 7.4.29
• WordPress 6.1-alpha-53344-src
• Safari 15.4
• Google Chrome 101.0.4951.64

Steps to Test Patch

1. Navigate to Settings > General and set the Site Language to a RTL language (e.g. Persian or Arabic).
2. Navigate to Dashboard > Home.
3. 🐞 Observe that the "6.0" image appears under the welcome box text, obscuring the text.
4. 🛠 Apply patch. Rebuild the site CSS as necessary (e.g. for wordpress-develop, run npm run build:dev). In the browser, force a hard cache reset to load the updated CSS.
5. Refresh the Dashboard > Home page.
6. ✅ Observe that the "6.0" image is positioned to the left of the welcome box, and not obscured by inline text.

Expected Results

• ✅ Bug was reproduced successfully.
• ✅ The patch addressed the reported issue.

Screenshots

Before Patch:

After Patch:

[ryelle]

In 53437:

Administration: Fix image overlap in Dashboard welcome panel.

Use longhand positioning properties (top, right, etc) so that the rtlcss build process can correctly adjust the layout for the RTL CSS.

Props ryelle, costdev, ironprogrammer, hellofromtonya.
Fixes #55793.

[hellofromTonya]

Marking [53437] okay for backport.

[hellofromTonya]

Whoopsie didn't mean to remove fixed-major keyword.

[ryelle]

In 53438:

Administration: Fix image overlap in Dashboard welcome panel.

Use longhand positioning properties (top, right, etc) so that the rtlcss build process can correctly adjust the layout for the RTL CSS.

Props ryelle, costdev, ironprogrammer, hellofromtonya.
Merges [53437] to the 6.0 branch.
Fixes #55793.