UI Updates

Updated some pages pages to be more consistent.

src/app/(staff)/staff/clients/[id]/page.tsx

@@ -180,18 +180,18 @@ export default async function StaffCustomerDetailsPage({
             {customer.phone && (
               <a
                 href={`tel:${customer.phone}`}
-                className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
+                className="border-line flex h-12 min-w-[104px] flex-1 items-center justify-center gap-2 rounded-md border bg-white px-4 text-xs font-bold"
               >
                 <Phone className="text-accent h-3.5 w-3.5" aria-hidden="true" /> Call
               </a>
             )}
             <a
               href={`mailto:${customer.email}`}
-              className="border-line flex items-center gap-2 rounded-lg border bg-white px-4 py-2 text-xs font-bold"
+              className="border-line flex h-12 min-w-[104px] flex-1 items-center justify-center gap-2 rounded-md border bg-white px-4 text-xs font-bold"
             >
               <Mail className="text-accent h-3.5 w-3.5" aria-hidden="true" /> Email
             </a>
-            <Button asChild size="sm">
+            <Button asChild size="md" className="min-w-[104px] flex-1">
               <Link href={`/staff/book?customerId=${customer.id}`}>Book Appointment</Link>
             </Button>
           </div>
@@ -208,8 +208,11 @@ export default async function StaffCustomerDetailsPage({
                 )}
               </p>
               <div className="mb-3 flex flex-wrap gap-2">
-                <AddStampButton customerId={id} />
-                <CorrectStampButton loyaltyAccountId={loyalty.accountId} />
+                <AddStampButton customerId={id} className="min-w-[140px] flex-1" />
+                <CorrectStampButton
+                  loyaltyAccountId={loyalty.accountId}
+                  className="min-w-[140px] flex-1"
+                />
               </div>
               {loyaltyTransactions.length > 0 && (
                 <ul className="space-y-1">
@@ -246,6 +249,17 @@ export default async function StaffCustomerDetailsPage({
         </Card>
 
         <div className="mt-4 space-y-4 lg:mt-0">
+          <Card className="p-6">
+            <h2 className="text-muted mb-4 text-sm font-bold tracking-widest uppercase">Notes</h2>
+            {/* A Super Administrator has no StaffProfile/staffId — passing "" is a
+                deliberate never-matches sentinel (see CustomerNotes' isOwn check),
+                so they can view every note but own none. Adding a note as a
+                Super Administrator fails gracefully server-side (see
+                addCustomerNoteAction: "You must be signed in as staff.") rather
+                than fabricating a staff identity for them. */}
+            <CustomerNotes customerId={customer.id} notes={notes} actingStaffId={context.staffId ?? ""} />
+          </Card>
+
           <Tabs defaultValue="upcoming">
             <TabsList>
               <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
@@ -260,17 +274,6 @@ export default async function StaffCustomerDetailsPage({
               {renderList(cancelled, "No cancelled appointments")}
             </TabsContent>
           </Tabs>
-
-          <Card className="p-6">
-            <h2 className="text-muted mb-4 text-sm font-bold tracking-widest uppercase">Notes</h2>
-            {/* A Super Administrator has no StaffProfile/staffId — passing "" is a
-                deliberate never-matches sentinel (see CustomerNotes' isOwn check),
-                so they can view every note but own none. Adding a note as a
-                Super Administrator fails gracefully server-side (see
-                addCustomerNoteAction: "You must be signed in as staff.") rather
-                than fabricating a staff identity for them. */}
-            <CustomerNotes customerId={customer.id} notes={notes} actingStaffId={context.staffId ?? ""} />
-          </Card>
         </div>
       </main>
     </div>