FIXED: The facility and appointment pages lack mobile responsiveness

src/components/Facility/FacilityHome.tsx

@@ -221,21 +221,21 @@ export const FacilityHome = ({ facilityId }: Props) => {
               )}
 
               <div className="absolute inset-x-0 bottom-0 p-6 text-white">
-                <div className="flex items-center gap-6">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-4">
+                <div className="flex flex-wrap items-center gap-4 md:gap-6">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 md:gap-4">
                       <Avatar
                         name={facilityData?.name}
-                        className="h-12 w-12 shrink-0 rounded-xl border-2 border-white/10 shadow-xl"
+                        className="h-10 w-10 md:h-12 md:w-12 shrink-0 rounded-xl border-2 border-white/10 shadow-xl"
                       />
-                      <div>
-                        <h1 className="text-3xl font-bold text-white">
+                      <div className="min-w-0">
+                        <h1 className="text-xl md:text-3xl font-bold text-white truncate">
                           {facilityData?.name}
                         </h1>
                       </div>
                     </div>
                   </div>
-                  <div className="flex-shrink-0">
+                  <div className="flex-shrink-0 mt-2 md:mt-0">
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <Button
@@ -246,7 +246,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
                           <MoreVertical className="h-4 w-4 text-white" />
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end" className="w-56">
+                      <DropdownMenuContent align="end" className="w-48 md:w-56">
                         {hasPermissionToEditCoverImage && (
                           <DropdownMenuItem
                             onClick={() => setEditCoverImage(true)}
@@ -282,7 +282,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
             <div className="mt-2 space-y-2">
               <Card>
                 <CardContent>
-                  <div className="flex flex-col gap-4 items-start mt-4">
+                  <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-12 mt-4">
                     <div className="flex items-start gap-3">
                       <MapPin className="mt-1 h-5 w-5 flex-shrink-0 text-muted-foreground" />
                       <div>

src/components/Schedule/Appointments/AppointmentDetailsPage.tsx

@@ -135,7 +135,7 @@ export default function AppointmentDetailsPage(props: Props) {
       <div className="container mx-auto p-6 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",
           )}
         >
@@ -173,7 +173,7 @@ export default function AppointmentDetailsPage(props: Props) {
               </Button>
             </div>
             <Separator className="my-4" />
-            <div className="mx-6 mt-10">
+            <div className="mx-0 sm:mx-6 mt-10">
               <AppointmentActions
                 appointment={appointment}
                 onChange={(status) => updateAppointment({ status })}

src/components/Schedule/Appointments/AppointmentTokenCard.tsx

@@ -24,14 +24,14 @@ 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 w-full xl: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]" />
 
       <div className="relative">
         <div className="flex items-start justify-between">
           <div>
-            <h3 className="text-lg font-bold tracking-tight">
+            <h3 className="text-base sm:text-lg font-bold tracking-tight">
               {facility.name}
             </h3>
             <div className="text-sm text-gray-600">
@@ -41,7 +41,7 @@ const AppointmentTokenCard = ({ id, appointment, facility }: Props) => {
           </div>
 
           <div>
-            <div className="text-sm whitespace-nowrap text-center bg-gray-100 px-3 pb-2 pt-6 -mt-6 font-medium text-gray-500">
+            <div className="text-xs sm:text-sm whitespace-nowrap text-center bg-gray-100 px-3 pb-2 pt-6 -mt-6 font-medium text-gray-500">
               <p>GENERAL</p>
               <p>OP TOKEN</p>
             </div>
@@ -63,7 +63,7 @@ const AppointmentTokenCard = ({ id, appointment, facility }: Props) => {
               <Label className="text-black font-semibold text-sm/none">
                 Token No.
               </Label>
-              <p className="text-5xl font-bold leading-none">
+              <p className="text-4xl sm:text-5xl font-bold leading-none">
                 {/* TODO: get token number from backend */}
                 {getFakeTokenNumber(appointment)}
               </p>

src/components/Schedule/Appointments/AppointmentsPage.tsx

@@ -254,16 +254,16 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
           </div>
         </div>
 
-        <div className="flex gap-4 items-center">
+        <div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
           <Input
-            className="w-[300px]"
+            className="w-full md:w-[300px]"
             placeholder={t("search")}
             value={qParams.search}
             onChange={(e) => setQParams({ search: e.target.value })}
           />
           <Popover>
             <PopoverTrigger asChild>
-              <Button variant="secondary">
+              <Button variant="secondary" className="w-full md:w-auto">
                 <CareIcon icon="l-filter" className="mr-2" />
                 <span>{t("filter")}</span>
               </Button>
@@ -479,6 +479,7 @@ function AppointmentRow(props: {
       <div className={cn(!data && "animate-pulse")}>
         <Tabs
           value={status}
+          className="w-full overflow-scroll"
           onValueChange={(value) => setStatus(value as Appointment["status"])}
         >
           <TabsList>