Remove extra padding in appointment details page | Current status dro…

…pdown (#10423)
ohcnetwork · Feb 6, 2025 · 2175dd3 · 2175dd3
1 parent 2c6f5db
commit 2175dd3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/pages/Appointments/AppointmentDetail.tsx b/src/pages/Appointments/AppointmentDetail.tsx
@@ -161,13 +161,13 @@ export default function AppointmentDetail(props: Props) {
             facility={facilityQuery.data}
           />
           <div className="mt-3">
-            <div id="appointment-token-card" className="bg-gray-50 p-4">
+            <div id="appointment-token-card" className="bg-gray-50 md:p-4">
               <AppointmentTokenCard
                 appointment={appointmentQuery.data}
                 facility={facilityQuery.data}
               />
             </div>
-            <div className="flex gap-2 justify-end px-6">
+            <div className="flex gap-2 justify-end px-6 mt-4 md:mt-0">
               <Button
                 variant="outline"
                 onClick={() => printAppointment({ t, facility, appointment })}
@@ -190,7 +190,7 @@ export default function AppointmentDetail(props: Props) {
               </Button>
             </div>
             <Separator className="my-4" />
-            <div className="mx-6 mt-10">
+            <div className="md:mx-6 mt-10">
               <AppointmentActions
                 facilityId={props.facilityId}
                 appointment={appointment}
@@ -216,11 +216,13 @@ const AppointmentDetails = ({
   const { t } = useTranslation();
 
   return (
-    <div className="container p-6 max-w-3xl space-y-6">
+    <div className="container md:p-6 max-w-3xl space-y-6">
       <Card>
         <CardHeader>
           <CardTitle>
-            <span className="mr-3">{t("schedule_information")}</span>
+            <span className="mr-3 inline-block mb-2">
+              {t("schedule_information")}
+            </span>
             <Badge
               variant={
                 (

diff --git a/src/pages/Appointments/AppointmentsPage.tsx b/src/pages/Appointments/AppointmentsPage.tsx
@@ -975,7 +975,7 @@ const AppointmentStatusDropdown = ({
   };
 
   return (
-    <div className="w-32">
+    <div className="w-32" onClick={(e) => e.stopPropagation()}>
       <Select
         value={currentStatus}
         onValueChange={(value) =>