From 18deada1138ee39b6c3aff312d747a6ed24f8224 Mon Sep 17 00:00:00 2001
From: Marcelo Amorim <mamorim813@gmail.com>
Date: Fri, 4 Oct 2024 22:47:07 -0300
Subject: [PATCH] Fix layout issues around images on the About page for narrow
 screens (#471):

- Updated image grid to span full width on mobile.
- In the staff section, images remain aligned to the left, with text on the right. When the text exceeds the image height, it wraps beneath and occupies full width for better readability.
---
 src/components/about/PageTemplate.js   | 26 ++++++++++++++++++++++++--
 src/components/about/PhotoGridUtils.js | 11 +++++++----
 src/components/about/ProjectPage.js    | 10 ++++++++++
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/about/PageTemplate.js b/src/components/about/PageTemplate.js
index a9512c71..14846176 100644
--- a/src/components/about/PageTemplate.js
+++ b/src/components/about/PageTemplate.js
@@ -71,12 +71,34 @@ const PageTemplateWrapper = styled.article`
   }
 
   .content {
-    display: inline-flex;
-    align-items: flex-start;
     margin-top: 10px;
+
     p {
       margin: 0;
     }
+
+    @media ${({ theme }) => theme.device.desktop} {
+      display: inline-flex;
+      align-items: flex-start;
+    }
+
+    @media ${({ theme }) => theme.device.mobile} {
+      overflow: hidden;
+      margin-top: 20px;
+
+      img {
+        max-width: 100%;
+        height: 100%;
+        float: left;
+        clear: left;
+      }
+    }
+
+    .div-aux {
+      float: left;
+      width: 0px;
+      height: 170px;
+    }
   }
 `
 
diff --git a/src/components/about/PhotoGridUtils.js b/src/components/about/PhotoGridUtils.js
index 6c6f4816..ad50677a 100644
--- a/src/components/about/PhotoGridUtils.js
+++ b/src/components/about/PhotoGridUtils.js
@@ -2,25 +2,28 @@ import styled from 'styled-components/macro'
 
 const Grid = styled.div`
   @media ${({ theme }) => theme.device.mobile} {
-    grid-template-columns: 160px 160px;
+    grid-template-columns: repeat(2, 1fr);
     gap: 6px;
     margin-top: 17px;
     margin-bottom: 17px;
+    justify-content: center;
+    float: 'top';
   }
   @media ${({ theme }) => theme.device.desktop} {
     margin: 16px;
     gap: 8px;
     grid-template-columns: 156px auto;
+    float: ${(props) => props.float || 'right'};
   }
   color: ${({ theme }) => theme.secondaryText};
-  float: ${(props) => props.float || 'right'};
   display: grid;
 `
 
 const Image = styled.img`
   @media ${({ theme }) => theme.device.mobile} {
-    width: 160px;
-    height: 94px;
+    width: 100%;
+    max-height: 250px;
+    height: auto;
   }
   @media ${({ theme }) => theme.device.desktop} {
     width: 156px;
diff --git a/src/components/about/ProjectPage.js b/src/components/about/ProjectPage.js
index 48beb750..aecc1149 100644
--- a/src/components/about/ProjectPage.js
+++ b/src/components/about/ProjectPage.js
@@ -107,6 +107,7 @@ const Project = () => (
       <h2>Staff</h2>
       <div className="content">
         <img src="https://fallingfruit.org/ethan_welty.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <em>Executive Director</em>
           <br />
@@ -136,6 +137,7 @@ const Project = () => (
       <h2>Board of directors</h2>
       <div className="content">
         <img src="https://fallingfruit.org/jeff_wanner.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <em>President</em>
           <br />
@@ -158,6 +160,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/craig_durkin.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Craig Durkin</b>
           <br />
@@ -176,6 +179,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/emily_sigman.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Emily Sigman</b>
           <br />
@@ -204,6 +208,7 @@ const Project = () => (
       <h2>Board of advisors</h2>
       <div className="content">
         <img src="https://fallingfruit.org/alan_gibson.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Alan Gibson</b>
           <br />
@@ -226,6 +231,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/ana_carolina_de_lima.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Ana Carolina de Lima</b>
           <br />
@@ -246,6 +252,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/caleb_phillips.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Caleb Phillips</b>
           <br />
@@ -269,6 +276,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/cristina_rubke.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Cristina Rubke</b>
           <br />
@@ -295,6 +303,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/david_craft.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>David Craft</b>
           <br />
@@ -315,6 +324,7 @@ const Project = () => (
       </div>
       <div className="content">
         <img src="https://fallingfruit.org/tristram_stuart.jpg" alt="" />
+        <div className="div-aux"></div>
         <p>
           <b>Tristram Stuart</b>
           <br />