From f15e538f5c78db507c7c3277a51558f7dd9f59b9 Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Fri, 3 Apr 2026 17:51:44 -0600
Subject: [PATCH] fix(ui): uniform card heights, tinted bottom section on
 client cards

---
 .../src/app/portal/_components/ClientCard.tsx | 40 ++++++++++---------
 .../portal/_components/ClientsPageClient.tsx  |  2 +-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx b/teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx
index 02b3394..7e4fbd0 100644
--- a/teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx
+++ b/teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx
@@ -12,32 +12,34 @@ type ClientCardProps = {
 
 export function ClientCard({ id, name, email, contacts = [], docCount, lastActivity }: ClientCardProps) {
   return (
-    <Link href={"/portal/clients/" + id} style={{ textDecoration: "none" }}>
+    <Link href={"/portal/clients/" + id} style={{ textDecoration: "none", display: "flex" }}>
       <div
-        style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 1px 4px rgba(0,0,0,0.07)", padding: "1.25rem", cursor: "pointer", transition: "box-shadow 0.2s" }}
+        style={{ display: "flex", flexDirection: "column", width: "100%", backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 1px 4px rgba(0,0,0,0.07)", overflow: "hidden", cursor: "pointer", transition: "box-shadow 0.2s" }}
         onMouseEnter={e => (e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.12)")}
         onMouseLeave={e => (e.currentTarget.style.boxShadow = "0 1px 4px rgba(0,0,0,0.07)")}
       >
-        {/* Primary contact */}
-        <p style={{ color: "#1B2B4B", fontWeight: 600, fontSize: "1rem", marginBottom: "0.125rem" }}>{name}</p>
-        <p style={{ color: "#6B7280", fontSize: "0.875rem", marginBottom: contacts.length > 0 ? "0.5rem" : "0.75rem" }}>{email}</p>
+        {/* Top section — contact info, grows to fill */}
+        <div style={{ flex: 1, padding: "1.25rem 1.25rem 1rem" }}>
+          <p style={{ color: "#1B2B4B", fontWeight: 600, fontSize: "1rem", marginBottom: "0.125rem" }}>{name}</p>
+          <p style={{ color: "#6B7280", fontSize: "0.875rem" }}>{email}</p>
 
-        {/* Additional contacts */}
-        {contacts.length > 0 && (
-          <div style={{ borderTop: "1px solid #F3F4F6", paddingTop: "0.5rem", marginBottom: "0.5rem", display: "flex", flexDirection: "column", gap: "0.25rem" }}>
-            {contacts.map(c => (
-              <div key={c.email} style={{ display: "flex", alignItems: "baseline", gap: "0.375rem" }}>
-                <span style={{ fontSize: "0.75rem", color: "#9CA3AF", flexShrink: 0 }}>+</span>
-                <div style={{ minWidth: 0 }}>
-                  <span style={{ fontSize: "0.8125rem", color: "#374151", fontWeight: 500 }}>{c.name}</span>
-                  <span style={{ fontSize: "0.75rem", color: "#9CA3AF", marginLeft: "0.375rem" }}>{c.email}</span>
+          {contacts.length > 0 && (
+            <div style={{ marginTop: "0.625rem", display: "flex", flexDirection: "column", gap: "0.3rem" }}>
+              {contacts.map(c => (
+                <div key={c.email} style={{ display: "flex", alignItems: "baseline", gap: "0.375rem" }}>
+                  <span style={{ fontSize: "0.75rem", color: "#C9A84C", fontWeight: 700, flexShrink: 0 }}>+</span>
+                  <div style={{ minWidth: 0 }}>
+                    <span style={{ fontSize: "0.8125rem", color: "#374151", fontWeight: 500 }}>{c.name}</span>
+                    <span style={{ fontSize: "0.75rem", color: "#9CA3AF", marginLeft: "0.375rem" }}>{c.email}</span>
+                  </div>
                 </div>
-              </div>
-            ))}
-          </div>
-        )}
+              ))}
+            </div>
+          )}
+        </div>
 
-        <div style={{ borderTop: "1px solid #F3F4F6", paddingTop: "0.75rem", display: "flex", justifyContent: "space-between" }}>
+        {/* Bottom section — tinted, always at bottom */}
+        <div style={{ backgroundColor: "#F5F3EF", padding: "0.625rem 1.25rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
           <span style={{ color: "#6B7280", fontSize: "0.75rem" }}>{docCount} document{docCount !== 1 ? "s" : ""}</span>
           <span style={{ color: "#9CA3AF", fontSize: "0.75rem" }}>
             {lastActivity
diff --git a/teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx b/teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx
index 6626467..2ad4c14 100644
--- a/teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx
+++ b/teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx
@@ -46,7 +46,7 @@ export function ClientsPageClient({ clients }: { clients: ClientRow[] }) {
           </button>
         </div>
       ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
           {clients.map((client) => (
             <ClientCard
               key={client.id}