From 95c02d86e8803949703bb268b09f12a3e27122ec Mon Sep 17 00:00:00 2001
From: Cody Ross <codycooperross@gmail.com>
Date: Mon, 6 Feb 2023 16:22:00 -0500
Subject: [PATCH] Wraps affiliations in divs for spacing

---
 src/components/WorkPerson/WorkPerson.tsx | 36 ++++++++++++++----------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/WorkPerson/WorkPerson.tsx b/src/components/WorkPerson/WorkPerson.tsx
index b3544122..fe7cfdf7 100644
--- a/src/components/WorkPerson/WorkPerson.tsx
+++ b/src/components/WorkPerson/WorkPerson.tsx
@@ -38,14 +38,16 @@ const WorkPerson: React.FunctionComponent<Props> = ({ person }) => {
         </h4>
         {person.affiliation.length > 0 && (
           <>
-            <div className="affiliation">
+            <div className="affiliations">
               {person.affiliation.map((item) =>
                 item.id ? (
-                  <Link key={item.id} href={'/ror.org' + rorFromUrl(item.id)}>
-                    <a>{item.name}</a>
-                  </Link>
+                  <div className="affiliation" key={item.id}>
+                    <Link href={'/ror.org' + rorFromUrl(item.id)}>
+                        <a>{item.name}</a>
+                    </Link>
+                  </div>
                 ) : (
-                  <div key={item.name}>{item.name}</div>
+                  <div className="affiliation" key={item.name}>{item.name}</div>
                 )
               )}
             </div>
@@ -69,14 +71,16 @@ const WorkPerson: React.FunctionComponent<Props> = ({ person }) => {
         </h4>
         {person.affiliation.length > 0 && (
           <>
-            <div className="affiliation">
+            <div className="affiliations">
               {person.affiliation.map((item) =>
                 item.id ? (
-                  <Link key={item.id} href={'/ror.org' + rorFromUrl(item.id)}>
-                    <a>{item.name}</a>
-                  </Link>
+                  <div className="affiliation" key={item.id}>
+                    <Link href={'/ror.org' + rorFromUrl(item.id)}>
+                        <a>{item.name}</a>
+                    </Link>
+                  </div>
                 ) : (
-                  <div key={item.name}>{item.name}</div>
+                  <div className="affiliation" key={item.name}>{item.name}</div>
                 )
               )}
             </div>
@@ -95,14 +99,16 @@ const WorkPerson: React.FunctionComponent<Props> = ({ person }) => {
       <h4 className="work">{name}</h4>
       {person.affiliation.length > 0 && (
         <>
-          <div className="affiliation">
+          <div className="affiliations">
             {person.affiliation.map((item) =>
               item.id ? (
-                <Link key={item.id} href={'/ror.org' + rorFromUrl(item.id)}>
-                  <a>{item.name}</a>
-                </Link>
+                <div className="affiliation" key={item.id}>
+                  <Link href={'/ror.org' + rorFromUrl(item.id)}>
+                      <a>{item.name}</a>
+                  </Link>
+                </div>
               ) : (
-                <div key={item.name}>{item.name}</div>
+                <div className="affiliation" key={item.name}>{item.name}</div>
               )
             )}
           </div>