RTL languages translation for NPT

[kelvinballoo]

Bug Description

When testing in RTL language, the 'Powered by Site Kit' is not properly aligned.

Steps to reproduce

1. Set up the site language with one that is RTL, e.g. Persian, Arabic
2. To view the Authorize Application screen with the customized styling applied, use the following URL with the hostname of your WP site. wp-admin/authorize-application.php?app_name=GoogleServiceIntegration&app_id=123e4567-e89b-12d3-a456-426614174000&success_url=https%3A%2F%2Fpublishers.google.com%2Fsettings%2Fauthorization%2Fwordpress&sitekit=true
3. See error

Screenshots

Currently, the 'Powered by Site Kit' string is here and I think this should be moved to the left to mirror the WordPress version alignment:

For reference, stock styling looks like this:

Additional Context

• PHP Version: 8.0
• OS: MacOS Sonoma
• Browser: Chrome
• Plugin Version: 1.126.0
• Device: Macbook Pro

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Ensure the 'Powered by Site Kit' text aligns correctly when viewed in an RTL (Right-to-Left) language context.
• The alignment of the 'Powered by Site Kit' custom footer text should mirror the alignment observed in the default WordPress footer when the website is set to an RTL language.

Implementation Brief

In assets/sass/authorize-application/_googlesitekit-authorize-application.scss:

• [x] Add RTL specific styles for the .googlesitekit-authorize-application__footer within the html[dir="rtl"] selector:
  • [x] Set left: auto to remove the left positioning.
  • [x] Set right: 0 to align the text to the right.
  • [x] Set margin-right: 36px to reverse the margin applied to the left side in LTR for the smaller screen sizes.
  • [x] For the larger screen sizes ($width-desktop + 1 + px), set margin-right: 160px to reverse the margin applied to the left side in LTR.

Test Coverage

• No new tests are required for this change.

QA Brief

• Follow the steps to reproduce the issue.
• Ensure the 'Powered by Site Kit' text is aligned correctly when viewed in an RTL language context.
• Ensure the alignment of the 'Powered by Site Kit' custom footer text mirrors the alignment observed in the default WordPress footer when the website is set to an RTL language.

Changelog entry

[techanvil]

IB :white_check_mark:

[kelvinballoo]

QA Update ✅

This is verified good.

• Just a note that in the ticket description the image having the red arrow towards to left is a bit misleading and should be ignored.
• In the end, the text 'Powered by Site Kit' should be moved to the right, which is what we've implemented.
• Tested on Mac OS (Chrome, Safari and Firefox) and Windows 11 (Edge)
• Verified on Tablet breakpoint (iPad Air)
• Verified on Mobile breakpoint (iPhone SE) even though there is nothing to verify there since the Powered by Site kit doesn't show on mobile

Moving this to Approval.