Review RTL formatting

[jamesozzie]

Bug Description

Currently for RTL users there are potential improvements which could be made. The layout and formatting of some elements should be considered.

Setup Improvements

Plugin Setup

• Logo padding

Primary dashboard

• G logo padding
• Product & status padding
• "View Date" search box

Module Specific Improvements

• Padding between module icons and titles
• Connected status padding

Reset Site Kit - button

---

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

Acceptance criteria

Implementation Brief

QA Brief

Changelog entry

[swissspidy]

Be aware that RTL layout looks a little bit different when using English text in an RTL setup. So the exclamation mark thing there is probably not an actual issue.

[Mrahmani71]

if it is possible to modify these codes for RTL formatting please.

` .googlesitekit-page { margin-right: -20px; }

.googlesitekit-page { margin-right: -10px; }

.googlesitekit-header .googlesitekit-date-range-selector svg { margin-left: 8px; }

.googlesitekit-plugin .googlesitekit-widget--analyticsAllTraffic__dot { margin: 0 0 0 4px; }

.googlesitekit-table .googlesitekit-table__head-item:first-child { padding-right: 0; text-align: right; }

.googlesitekit-table--with-list .googlesitekit-tablebody-item:first-child .googlesitekit-tablebody-item-content::before { right: -24px; }

.googlesitekit-table--with-list .googlesitekit-tablebody-item:first-child .googlesitekit-tablebody-item-content { margin-right: 24px; }

.googlesitekit-table .googlesitekit-table__body-item:first-child { text-align: right; }

.googlesitekit-cta-link { text-align: right; }

.googlesitekit-post-searcher .googlesitekit-post-searcher__label { right: 30px; }

.googlesitekit-accordion .googlesitekit-accordion__header::after { left: 16px; }

.googlesitekit-cta-link.googlesitekit-cta-link--arrow, .googlesitekit-cta-link.googlesitekit-cta-link--external { background-position: calc(1%) center; padding-left: 20px; }

.googlesitekit-settings-module .googlesitekit-settings-module__status-icon { margin-right: 16px; }

.googlesitekit-settings-module .googlesitekit-settings-module__title-icon { margin-left: 16px; }

`

[Mrahmani71]

The location of this button must also be changed and rotated

[danstramer]

As a first step, adding direction:ltr to the wrapping div could help: This is an RTL site with an RTL admin, In the example below I added the direction:ltr to the wrapping DIV of the Site Kit UI.

[tofumatt]

Notes from a quick look through I did a few weeks back:

• Audit our CSS usage for places where we are using things like margin-left and try for margin-inline-start
• Alternatively/in-additon to the above: create an RTL stylesheet that is loaded for RTL languages that inverts the relevant CSS.
• Given we don't currently support any RTL languages, use the above suggestion of direction: ltr; for Site Kit enclosing divs to prevent layout issues inside Site Kit.

These are probably some of the biggest things to do.

I tried to load some RTL languages but Site Kit… didn't seem to honour my language choices. See: #7819.

[ivonac4]

@tofumatt Is there anything more you are planning to do on this ticket or you need help from someone? What do we need to do to help it move to the next stage of the process (AC review, IB)?

[tofumatt]

@ivonac4 This one is pretty low-priority but I'll unassign myself for now. There's a lot of further auditing needed but this might actually be a good candidate for a Hackathon project in the future.