From 5c7a0fd0611d7da403ca2d73f6f10ce943e7701c Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Thu, 19 Mar 2026 21:54:07 -0600
Subject: [PATCH] fix(04-03): style Browse files as a visible button with
 selected filename display

---
 .../src/app/portal/_components/AddDocumentModal.tsx    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/teressa-copeland-homes/src/app/portal/_components/AddDocumentModal.tsx b/teressa-copeland-homes/src/app/portal/_components/AddDocumentModal.tsx
index 2936313..9755af8 100644
--- a/teressa-copeland-homes/src/app/portal/_components/AddDocumentModal.tsx
+++ b/teressa-copeland-homes/src/app/portal/_components/AddDocumentModal.tsx
@@ -96,7 +96,15 @@ export function AddDocumentModal({ clientId, onClose }: { clientId: string; onCl
 
         <div className="mb-4">
           <label className="block text-sm font-medium mb-1">Or upload a custom PDF</label>
-          <input type="file" accept="application/pdf" onChange={handleFileChange} className="text-sm" />
+          <div className="flex items-center gap-3">
+            <label className="cursor-pointer px-4 py-2 text-sm border border-gray-300 rounded bg-white hover:bg-gray-50 font-medium">
+              Browse files
+              <input type="file" accept="application/pdf" onChange={handleFileChange} className="hidden" />
+            </label>
+            {customFile && (
+              <span className="text-sm text-gray-600 truncate max-w-xs">{customFile.name}</span>
+            )}
+          </div>
         </div>
 
         <form onSubmit={handleSubmit}>