From c4b53cb63c2a6c009570ffa34b1c8da14df4e6bd Mon Sep 17 00:00:00 2001
From: Marcelo Amorim <mamorim813@gmail.com>
Date: Tue, 8 Oct 2024 21:59:14 -0300
Subject: [PATCH] (#471) Refine image layout on the About page for mobile
 devices: - 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   | 17 ++++++++++-------
 src/components/about/PhotoGridUtils.js |  6 +++---
 src/components/about/ProjectPage.js    | 10 ++++++++++
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/about/PageTemplate.js b/src/components/about/PageTemplate.js
index 7a866b63..14846176 100644
--- a/src/components/about/PageTemplate.js
+++ b/src/components/about/PageTemplate.js
@@ -83,18 +83,21 @@ const PageTemplateWrapper = styled.article`
     }
 
     @media ${({ theme }) => theme.device.mobile} {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+      overflow: hidden;
+      margin-top: 20px;
 
       img {
         max-width: 100%;
-        height: auto;
+        height: 100%;
+        float: left;
+        clear: left;
       }
+    }
 
-      p {
-        margin-bottom: 12px;
-      }
+    .div-aux {
+      float: left;
+      width: 0px;
+      height: 170px;
     }
   }
 `
diff --git a/src/components/about/PhotoGridUtils.js b/src/components/about/PhotoGridUtils.js
index 2d804a27..ad50677a 100644
--- a/src/components/about/PhotoGridUtils.js
+++ b/src/components/about/PhotoGridUtils.js
@@ -2,7 +2,7 @@ import styled from 'styled-components/macro'
 
 const Grid = styled.div`
   @media ${({ theme }) => theme.device.mobile} {
-    grid-template-columns: repeat(2, minmax(0, 160px));
+    grid-template-columns: repeat(2, 1fr);
     gap: 6px;
     margin-top: 17px;
     margin-bottom: 17px;
@@ -22,8 +22,8 @@ const Grid = styled.div`
 const Image = styled.img`
   @media ${({ theme }) => theme.device.mobile} {
     width: 100%;
-    max-width: 160px;
-    height: 94px;
+    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 />