From b4cf5f1ab4849fa035a3e749a20b5c6aa71021e2 Mon Sep 17 00:00:00 2001
From: Sboonny <muhammed@freecodecamp.org>
Date: Thu, 26 Jan 2023 11:31:27 +0000
Subject: [PATCH] feat(client): make portfolio section in profile support RTL
 layout

---
 .../profile/components/portfolio.css          | 29 ++++++++++++++++---
 .../profile/components/portfolio.tsx          | 23 +++++++--------
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/client/src/components/profile/components/portfolio.css b/client/src/components/profile/components/portfolio.css
index 227a891ce84..1c86e9035fa 100644
--- a/client/src/components/profile/components/portfolio.css
+++ b/client/src/components/profile/components/portfolio.css
@@ -1,12 +1,33 @@
-.portfolio-heading.media-heading {
+.portfolio-container {
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  grid-template-rows: 1fr 2fr;
+  gap: 0.5rem;
+  margin-top: 1em;
+  zoom: 1;
+  overflow: hidden;
+}
+.portfolio-heading {
+  grid-column: 2;
+  grid-row: 1;
   border-bottom: 1px solid var(--quaternary-background);
   padding-bottom: 10px;
+  margin-bottom: 0;
+}
+.screen-shot-container {
+  grid-column: 1;
+  grid-row: 1 / 3;
 }
 .portfolio-screen-shot {
-  width: 150px;
-  min-width: 150px;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.portfolio-container p {
+  margin-top: 0;
+  grid-column: 2;
+  grid-row: 2;
 }
-
 /* Timeline pagination */
 .timeline-pagination_list {
   list-style: none;
diff --git a/client/src/components/profile/components/portfolio.tsx b/client/src/components/profile/components/portfolio.tsx
index 4e361dcadfa..c106059e211 100644
--- a/client/src/components/profile/components/portfolio.tsx
+++ b/client/src/components/profile/components/portfolio.tsx
@@ -1,4 +1,3 @@
-import { Media } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,8 +19,8 @@ function Portfolio({ portfolio = [] }: PortfolioProps): JSX.Element | null {
     <FullWidthRow>
       <h2 className='text-center'>{t('profile.portfolio')}</h2>
       {portfolio.map(({ title, url, image, description, id }) => (
-        <Media key={id}>
-          <Media.Left align='middle'>
+        <div className='portfolio-container' key={id}>
+          <div className='screen-shot-container'>
             {image && (
               <img
                 alt={t('profile.screen-shot', { title: title })}
@@ -29,16 +28,14 @@ function Portfolio({ portfolio = [] }: PortfolioProps): JSX.Element | null {
                 src={image}
               />
             )}
-          </Media.Left>
-          <Media.Body>
-            <Media.Heading className='portfolio-heading'>
-              <a href={url} rel='nofollow noopener noreferrer'>
-                {title}
-              </a>
-            </Media.Heading>
-            <p>{description}</p>
-          </Media.Body>
-        </Media>
+          </div>
+          <h3 className='portfolio-heading'>
+            <a href={url} rel='nofollow noopener noreferrer'>
+              {title}
+            </a>
+          </h3>
+          <p>{description}</p>
+        </div>
       ))}
       <hr />
     </FullWidthRow>