From e997476b31f87ccc16e71522d3ca36aaab7c9122 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 23 Apr 2026 21:55:30 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/clients.$clientId.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/routes/clients.$clientId.tsx b/src/routes/clients.$clientId.tsx
index 34e0f9f..faf6bc9 100644
--- a/src/routes/clients.$clientId.tsx
+++ b/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>