Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/clients.$clientId.tsx

@@ -227,11 +227,19 @@ function ClientDetail() {
                 </div>
                 <div className="divide-y">
                   {client.board_members.map((m: any, i: number) => (
-                    <div key={i} className="py-2.5 flex flex-wrap items-baseline gap-x-4 gap-y-1 text-sm">
-                      <span className="font-medium">{m.name}</span>
-                      {m.role && <span className="text-xs uppercase tracking-wider text-muted-foreground">{m.role}</span>}
-                      {m.email && <span className="text-muted-foreground">{m.email}</span>}
-                      {m.phone && <span className="text-muted-foreground">{m.phone}</span>}
+                    <div key={i} className="py-2.5 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 text-sm">
+                      <div className="flex items-baseline gap-x-3 min-w-0">
+                        <span className="font-medium">{m.name}</span>
+                        {m.role && <span className="text-xs uppercase tracking-wider text-muted-foreground">{m.role}</span>}
+                      </div>
+                      <div className="flex items-baseline gap-x-4 text-muted-foreground">
+                        {m.email && (
+                          <a href={`mailto:${m.email}`} className="hover:text-foreground hover:underline">
+                            {m.email}
+                          </a>
+                        )}
+                        {m.phone && <span>{m.phone}</span>}
+                      </div>
                     </div>
                   ))}
                 </div>