Fix: Improve Mobile Responsiveness and Layout for Edit User Form (#10359

)
ohcnetwork · Feb 4, 2025 · fdf44a4 · fdf44a4
1 parent fe44c96
commit fdf44a4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/src/components/Users/UserForm.tsx b/src/components/Users/UserForm.tsx
@@ -307,7 +307,7 @@ export default function UserForm({
           />
         )}
 
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <FormField
             control={form.control}
             name="first_name"
@@ -414,7 +414,7 @@ export default function UserForm({
               )}
             />
 
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <FormField
                 control={form.control}
                 name="password"
@@ -507,7 +507,7 @@ export default function UserForm({
           />
         )}
 
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <FormField
             control={form.control}
             name="phone_number"

diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
@@ -30,13 +30,28 @@ export function DatePicker({ date, onChange, disabled }: DatePickerProps) {
           className={cn(
             "w-full justify-start text-left font-normal",
             !date && "text-gray-500",
+            "sm:w-auto",
           )}
         >
-          <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
+          <CareIcon
+            icon="l-calender"
+            className="mr-0 sm:mr-2 h-4 w-4 flex-shrink-0"
+          />
+          <span className="truncate">
+            {date ? (
+              <>
+                <span className="block sm:hidden">
+                  {format(date, "MMM d, yyyy")}
+                </span>
+                <span className="hidden sm:block">{format(date, "PPP")}</span>
+              </>
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
+      <PopoverContent className="w-auto p-0 sm:w-64" align="start">
         <Calendar
           mode="single"
           selected={date}

diff --git a/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx b/src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx
@@ -431,7 +431,7 @@ export default function CreateScheduleTemplateSheet({
                         )}
                       /> */}
 
-                      <div className="flex items-center gap-4 col-span-2 md:col-span-1">
+                      <div className="flex items-center gap-0 sm:gap-4 col-span-2 md:col-span-1">
                         <FormField
                           control={form.control}
                           name={`availabilities.${index}.start_time`}
@@ -466,13 +466,16 @@ export default function CreateScheduleTemplateSheet({
                       {form.watch(`availabilities.${index}.slot_type`) ===
                         "appointment" && (
                         <>
-                          <div className="flex items-center gap-4 col-span-2 md:col-span-1">
+                          <div className="flex items-center gap-2 sm:gap-4 col-span-2 md:col-span-1">
                             <FormField
                               control={form.control}
                               name={`availabilities.${index}.slot_size_in_minutes`}
                               render={({ field }) => (
                                 <FormItem className="flex-1">
-                                  <FormLabel required>
+                                  <FormLabel
+                                    required
+                                    className="whitespace-nowrap"
+                                  >
                                     {t("schedule_slot_size_label")}
                                   </FormLabel>
                                   <FormControl>
@@ -497,7 +500,10 @@ export default function CreateScheduleTemplateSheet({
                               name={`availabilities.${index}.tokens_per_slot`}
                               render={({ field }) => (
                                 <FormItem className="flex-1">
-                                  <FormLabel required>
+                                  <FormLabel
+                                    required
+                                    className="whitespace-nowrap"
+                                  >
                                     {t("patients_per_slot")}
                                   </FormLabel>
                                   <FormControl>