Wraps affiliations in divs for spacing

datacite · Feb 6, 2023 · 95c02d8 · 95c02d8
1 parent 6be6e84
commit 95c02d8
Showing 1 changed file with 21 additions and 15 deletions.
diff --git 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>