Appointment details layout

fixed button layout on appointment details page.

added an explainer for all the notifications

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

@@ -258,20 +258,20 @@ export default async function StaffAppointmentDetailsPage({
         <div className="flex flex-wrap gap-3">
           <a
             href={`/api/appointments/${appointment.id}/calendar.ics`}
-            className="rounded-md border-line flex items-center gap-2 border bg-white px-5 py-3 text-sm font-bold"
+            className="rounded-md border-line flex min-w-[140px] flex-1 items-center justify-center gap-2 border bg-white px-5 py-3 text-sm font-bold"
           >
             <CalendarPlus className="text-accent h-4 w-4" aria-hidden="true" /> Add to Calendar
           </a>
           {RESCHEDULABLE.has(appointment.status) && (
             <Link
               href={`/staff/appointments/${appointment.id}/reschedule`}
-              className="rounded-md border-line border bg-white px-5 py-3 text-sm font-bold"
+              className="rounded-md border-line min-w-[110px] flex-1 border bg-white px-5 py-3 text-center text-sm font-bold"
             >
               Reschedule
             </Link>
           )}
           {appointment.status === "COMPLETED" && (
-            <BookFollowUpButton appointmentId={appointment.id} />
+            <BookFollowUpButton appointmentId={appointment.id} className="min-w-[110px] flex-1 text-center" />
           )}
         </div>
 

src/features/staff/components/appointment-status-actions.tsx

@@ -117,6 +117,15 @@ export function AppointmentStatusActions({
         ? "Mark as No-Show?"
         : "Cancel Appointment?";
 
+  // "wrap" buttons are `flex-1` (not intrinsically sized) so a row of
+  // two or three ends up as an even, aligned segmented row instead of
+  // packing left at whatever width each label's text happens to need —
+  // that's what made "Check In"/"Mark No-Show"/"Cancel" (very different
+  // label lengths) look lopsided together. `min-w` keeps a button from
+  // getting squeezed illegibly thin before the row wraps.
+  const buttonSize = layout === "stack" ? undefined : "sm";
+  const buttonClassName = layout === "stack" ? "w-full" : "min-w-[110px] flex-1";
+
   return (
     <div className="space-y-3">
       {error && !confirmKind && (
@@ -127,8 +136,8 @@ export function AppointmentStatusActions({
       <div className={layout === "stack" ? "flex flex-col gap-2" : "flex flex-wrap gap-2"}>
         {status === "PENDING" && (
           <Button
-            size={layout === "stack" ? undefined : "sm"}
-            className={layout === "stack" ? "w-full" : undefined}
+            size={buttonSize}
+            className={buttonClassName}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.confirm(appointmentId))}
           >
@@ -137,8 +146,8 @@ export function AppointmentStatusActions({
         )}
         {status === "CONFIRMED" && (
           <Button
-            size={layout === "stack" ? undefined : "sm"}
-            className={layout === "stack" ? "w-full" : undefined}
+            size={buttonSize}
+            className={buttonClassName}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.checkIn(appointmentId))}
           >
@@ -147,8 +156,8 @@ export function AppointmentStatusActions({
         )}
         {status === "CHECKED_IN" && (
           <Button
-            size={layout === "stack" ? undefined : "sm"}
-            className={layout === "stack" ? "w-full" : undefined}
+            size={buttonSize}
+            className={buttonClassName}
             isLoading={isPending}
             onClick={() => runQuiet(() => actions.start(appointmentId))}
           >
@@ -156,31 +165,17 @@ export function AppointmentStatusActions({
           </Button>
         )}
         {status === "IN_PROGRESS" && (
-          <Button
-            size={layout === "stack" ? undefined : "sm"}
-            className={layout === "stack" ? "w-full" : undefined}
-            onClick={() => setConfirmKind("complete")}
-          >
+          <Button size={buttonSize} className={buttonClassName} onClick={() => setConfirmKind("complete")}>
             Complete Appointment
           </Button>
         )}
         {status === "CONFIRMED" && (
-          <Button
-            size={layout === "stack" ? undefined : "sm"}
-            className={layout === "stack" ? "w-full" : undefined}
-            variant="secondary"
-            onClick={() => setConfirmKind("no_show")}
-          >
+          <Button size={buttonSize} className={buttonClassName} variant="secondary" onClick={() => setConfirmKind("no_show")}>
             Mark No-Show
           </Button>
         )}
         {(status === "PENDING" || status === "CONFIRMED" || status === "CHECKED_IN") && (
-          <Button
-            size={layout === "stack" ? undefined : "sm"}
-            className={layout === "stack" ? "w-full" : undefined}
-            variant="destructive"
-            onClick={() => setConfirmKind("cancel")}
-          >
+          <Button size={buttonSize} className={buttonClassName} variant="destructive" onClick={() => setConfirmKind("cancel")}>
             Cancel
           </Button>
         )}