From 8a479d77a5e726da0410d90aeffe7801c9e6338a Mon Sep 17 00:00:00 2001
From: Igor <35524806+igorschoester@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:31:34 +0100
Subject: [PATCH] Fix support page RTL

---
 packages/js/src/support/app.js                      | 10 +++++-----
 packages/js/src/support/components/resource-card.js |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/js/src/support/app.js b/packages/js/src/support/app.js
index 32e18b7ef7b..dfdb72cf9ae 100644
--- a/packages/js/src/support/app.js
+++ b/packages/js/src/support/app.js
@@ -83,7 +83,7 @@ export const App = () => {
 
 	return (
 		<div className="yst-p-4 min-[783px]:yst-p-8">
-			<div className={ classNames( "yst-flex yst-flex-grow yst-flex-wrap", ! isPremium && "xl:yst-pr-[17.5rem]" ) }>
+			<div className={ classNames( "yst-flex yst-flex-grow yst-flex-wrap", ! isPremium && "xl:yst-pe-[17.5rem]" ) }>
 				<Paper as="main" className="yst-flex-grow yst-mb-8 xl:yst-mb-0">
 					<Paper.Header>
 						<div className="yst-max-w-screen-sm">
@@ -113,7 +113,7 @@ export const App = () => {
 													target="_blank"
 												>
 													{ title }
-													<ArrowNarrowRightIcon className="yst-inline-block yst-ml-1.5 yst-h-3 yst-w-3 yst-icon-rtl" />
+													<ArrowNarrowRightIcon className="yst-inline-block yst-ms-1.5 yst-h-3 yst-w-3 yst-icon-rtl" />
 												</Link>
 											</li>
 										</Fragment>
@@ -210,7 +210,7 @@ export const App = () => {
 									{ ...premiumUpsellConfig }
 								>
 									<div className={ classNames( "yst-flex", ! isPremium && "yst-opacity-50" ) }>
-										<div className="yst-mr-6">
+										<div className="yst-me-6">
 											<p>{ __( "Our support team is here to answer any questions you may have. Fill out the (pop-up) contact form, and we'll get back to you as soon as possible!", "wordpress-seo" ) }</p>
 											<Button
 												variant="secondary"
@@ -218,7 +218,7 @@ export const App = () => {
 												onClick={ openHelpScoutBeacon }
 											>
 												{ __( "Contact our support team", "wordpress-seo" ) }
-												<ArrowNarrowRightIcon className="yst-inline-block yst-ml-1.5 yst-h-3 yst-w-3 yst-icon-rtl" />
+												<ArrowNarrowRightIcon className="yst-inline-block yst-ms-1.5 yst-h-3 yst-w-3 yst-icon-rtl" />
 											</Button>
 										</div>
 										<img
@@ -236,7 +236,7 @@ export const App = () => {
 					</Paper.Content>
 				</Paper>
 				{ ! isPremium &&
-					<div className="xl:yst-max-w-3xl xl:yst-fixed xl:yst-right-8 xl:yst-w-[16rem]">
+					<div className="xl:yst-max-w-3xl xl:yst-fixed xl:yst-end-8 xl:yst-w-[16rem]">
 						<SidebarRecommendations
 							premiumLink={ premiumLink }
 							premiumUpsellConfig={ premiumUpsellConfig }
diff --git a/packages/js/src/support/components/resource-card.js b/packages/js/src/support/components/resource-card.js
index 66ffbd6b06e..5b4fe9bd2aa 100644
--- a/packages/js/src/support/components/resource-card.js
+++ b/packages/js/src/support/components/resource-card.js
@@ -41,7 +41,7 @@ export const ResourceCard = ( { imageSrc, title, description, linkHref, linkText
 					__( "(Opens in a new browser tab)", "wordpress-seo" )
 				}
 			</span>
-			<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ml-1 yst-icon-rtl" />
+			<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ms-1 yst-icon-rtl" />
 		</Link>
 	</Card>
 );