Fix support page RTL

Author: igorschoester

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,15 +210,15 @@ 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"
 												className="yst-mt-4"
 												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 }

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>
 );