From 45dc6aee9e701747854cabb7e34296c6d6a3db85 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Sat, 18 Feb 2023 22:58:01 +0200
Subject: [PATCH] feat(client): make portfolio section in profile support RTL
 layout (#49148)

* feat(client): make portfolio section in profile support RTL layout

* Revert "feat(client): make portfolio section in profile support RTL layout"

This reverts commit b4cf5f1ab4849fa035a3e749a20b5c6aa71021e2.

* make media component responsive

* fix the selector

* hook the media left through an id

* hook the media left through an id
---
 client/src/components/layouts/rtl-layout.css           | 8 ++++++++
 client/src/components/profile/components/portfolio.tsx | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/components/layouts/rtl-layout.css b/client/src/components/layouts/rtl-layout.css
index deb01acd931..dbcd21c437c 100644
--- a/client/src/components/layouts/rtl-layout.css
+++ b/client/src/components/layouts/rtl-layout.css
@@ -6,6 +6,14 @@ Increase the spacing in paragraphs
   line-height: 2rem;
 }
 
+/* 
+Profile section
+*/
+
+[dir='rtl'] #profile-portfolio-image {
+  padding-left: 10px;
+}
+
 /* 
 Intro project buttons and headings 
 */
diff --git a/client/src/components/profile/components/portfolio.tsx b/client/src/components/profile/components/portfolio.tsx
index 4e361dcadfa..4c11899925d 100644
--- a/client/src/components/profile/components/portfolio.tsx
+++ b/client/src/components/profile/components/portfolio.tsx
@@ -21,7 +21,7 @@ function Portfolio({ portfolio = [] }: PortfolioProps): JSX.Element | null {
       <h2 className='text-center'>{t('profile.portfolio')}</h2>
       {portfolio.map(({ title, url, image, description, id }) => (
         <Media key={id}>
-          <Media.Left align='middle'>
+          <Media.Left id='profile-portfolio-image' align='middle'>
             {image && (
               <img
                 alt={t('profile.screen-shot', { title: title })}