🐛 fix team page styles on mobile when link around image is present

owid · Jan 10, 2025 · c39e7b3 · c39e7b3
1 parent 8c0747a
commit c39e7b3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/site/gdocs/components/Person.scss b/site/gdocs/components/Person.scss
@@ -23,7 +23,8 @@
     }
 }
 
-.person-image {
+.person-image,
+.person-image--link-wrapper {
     picture {
         display: flex; // Fix extra padding at the bottom.
     }

diff --git a/site/gdocs/components/Person.tsx b/site/gdocs/components/Person.tsx
@@ -44,7 +44,13 @@ export default function Person({ person }: { person: EnrichedBlockPerson }) {
         <div className="person">
             {person.image && (
                 <div className="person-image-container">
-                    {url ? <a href={url}>{image}</a> : image}
+                    {url ? (
+                        <a href={url} className="person-image--link-wrapper">
+                            {image}
+                        </a>
+                    ) : (
+                        image
+                    )}
                     {isSmallScreen && header}
                 </div>
             )}