style

Author: ap-justin

src/pages/nonprofit-outreach/contacts.tsx

@@ -7,21 +7,20 @@ interface Props {
 
 export function Contacts(props: Props) {
   return (
-    <div className="flex max-w-40 max-h-40 overflow-y-auto scroller flex-wrap gap-2">
+    <div className="grid gap-2 max-h-40 overflow-y-auto">
       {props.contacts
         .filter((x) => x.email || x.phone)
         .map((x, index) => (
-          <div key={index} className="grid">
-            <span className="whitespace-normal">{x.name || "--"}</span>
-            <span className="text-2xs whitespace-normal">{x.role}</span>
+          <div key={index} className="grid gap-1">
+            <span className="">{x.name || "--"}</span>
+            <span className="text-xs ">{x.role}</span>
 
             {x.email && (
               <Copier
                 size={12}
                 text={x.email}
                 classes={{
-                  container:
-                    "text-xs text-blue-d2 text-wrap break-all text-left",
+                  container: "text-xs text-blue-d2 text-left",
                   icon: "inline mr-1",
                 }}
               >
@@ -30,9 +29,7 @@ export function Contacts(props: Props) {
             )}
 
             {x.phone && (
-              <span className="text-2xs text-gray-d1 whitespace-normal">
-                {x.phone}
-              </span>
+              <span className="text-2xs text-gray-d1">{x.phone}</span>
             )}
           </div>
         ))}