appointment card ui fix

ohcnetwork · Jan 10, 2025 · c26a9d5 · c26a9d5
1 parent 6fa1849
commit c26a9d5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Patient/PatientDetailsTab/Appointments.tsx b/src/components/Patient/PatientDetailsTab/Appointments.tsx
@@ -52,12 +52,15 @@ export const Appointments = (props: PatientProps) => {
 
   return (
     <div className="mt-4 px-3 md:px-0">
-      <div className="flex justify-between items-center mb-4">
-        <h2 className="text-2xl font-semibold leading-tight">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 space-y-2 sm:space-y-0">
+        <h2 className="text-2xl font-semibold leading-tight text-center sm:text-left">
           {t("appointments")}
         </h2>
         <Button variant="outline_primary" asChild>
-          <Link href={`/facility/${facilityId}/patient/${id}/book-appointment`}>
+          <Link
+            href={`/facility/${facilityId}/patient/${id}/book-appointment`}
+            className="flex items-center justify-center w-full sm:w-auto"
+          >
             <CareIcon icon="l-plus" className="mr-2" />
             {t("schedule_appointment")}
           </Link>

diff --git a/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx b/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx
@@ -132,10 +132,10 @@ export default function AppointmentDetailsPage(props: Props) {
         [appointment.id]: { name: `Appointment on ${appointmentDate}` },
       }}
     >
-      <div className="container mx-auto p-6 max-w-7xl">
+      <div className="container mx-auto max-w-7xl">
         <div
           className={cn(
-            "flex flex-col md:flex-row",
+            "flex flex-col lg:flex-row",
             isPending && "opacity-50 pointer-events-none animate-pulse",
           )}
         >
@@ -150,7 +150,7 @@ export default function AppointmentDetailsPage(props: Props) {
                 facility={facilityQuery.data}
               />
             </div>
-            <div className="flex gap-2 justify-end px-6">
+            <div className="flex gap-2 justify-center lg:justify-end px-6">
               <Button
                 variant="outline"
                 onClick={() => printAppointment({ t, facility, appointment })}

diff --git a/src/components/Schedule/Appointments/AppointmentTokenCard.tsx b/src/components/Schedule/Appointments/AppointmentTokenCard.tsx
@@ -24,7 +24,7 @@ const AppointmentTokenCard = ({ id, appointment, facility }: Props) => {
   return (
     <Card
       id={id}
-      className="p-6 w-[30rem] border border-gray-300 relative hover:scale-105 hover:rotate-1 hover:shadow-xl transition-all duration-300 ease-in-out"
+      className="p-6 lg:w-[30rem] max-w-[30rem] border border-gray-300 relative hover:scale-105 hover:rotate-1 hover:shadow-xl transition-all duration-300 ease-in-out"
     >
       <div className="absolute inset-0 opacity-[0.1] pointer-events-none bg-[url('/images/care_logo_gray.svg')] bg-center bg-no-repeat bg-[length:60%_auto]" />