From 4b8b031e6bc6f1b2dd80949e8470d826fd5edceb Mon Sep 17 00:00:00 2001
From: Hritesh Shanty <shanty.hritesh@gmail.com>
Date: Sun, 16 Feb 2025 22:54:42 +0530
Subject: [PATCH 1/2] resolved Appointments select practitioner options popover
 inconsistent spacing between the options bug

---
 src/pages/Appointments/AppointmentsPage.tsx | 62 +++++++++++----------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/pages/Appointments/AppointmentsPage.tsx b/src/pages/Appointments/AppointmentsPage.tsx
index 2a9fd13d298..bd0cd2ed9a4 100644
--- a/src/pages/Appointments/AppointmentsPage.tsx
+++ b/src/pages/Appointments/AppointmentsPage.tsx
@@ -417,36 +417,38 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
                           )}
                         </CommandItem>
                       </PopoverClose>
-                      {schedulableUsersQuery.data?.users.map((user) => (
-                        <PopoverClose className="w-full" key={user.id}>
-                          <CommandItem
-                            value={formatName(user)}
-                            onSelect={() =>
-                              setQParams({
-                                ...qParams,
-                                practitioner: user.username,
-                                slot: null,
-                              })
-                            }
-                            className="cursor-pointer"
-                          >
-                            <div className="flex items-center gap-2">
-                              <Avatar
-                                imageUrl={user.profile_picture_url}
-                                name={formatName(user)}
-                                className="size-6 rounded-full"
-                              />
-                              <span>{formatName(user)}</span>
-                              <span className="text-xs text-gray-500 font-medium">
-                                {user.user_type}
-                              </span>
-                            </div>
-                            {qParams.practitioner === user.username && (
-                              <CheckIcon className="ml-auto" />
-                            )}
-                          </CommandItem>
-                        </PopoverClose>
-                      ))}
+                      <div className="flex flex-col align-top">
+                        {schedulableUsersQuery.data?.users.map((user) => (
+                          <PopoverClose className="w-full" key={user.id}>
+                            <CommandItem
+                              value={formatName(user)}
+                              onSelect={() =>
+                                setQParams({
+                                  ...qParams,
+                                  practitioner: user.username,
+                                  slot: null,
+                                })
+                              }
+                              className="cursor-pointer"
+                            >
+                              <div className="flex items-center gap-2">
+                                <Avatar
+                                  imageUrl={user.profile_picture_url}
+                                  name={formatName(user)}
+                                  className="size-6 rounded-full"
+                                />
+                                <span>{formatName(user)}</span>
+                                <span className="text-xs text-gray-500 font-medium">
+                                  {user.user_type}
+                                </span>
+                              </div>
+                              {qParams.practitioner === user.username && (
+                                <CheckIcon className="ml-auto" />
+                              )}
+                            </CommandItem>
+                          </PopoverClose>
+                        ))}
+                      </div>
                     </CommandGroup>
                   </CommandList>
                 </Command>

From 73e6351c12bc83f99a536eeb3affe5d590cfd4fe Mon Sep 17 00:00:00 2001
From: Hritesh Shanty <shanty.hritesh@gmail.com>
Date: Mon, 17 Feb 2025 13:19:27 +0530
Subject: [PATCH 2/2] fixed the bug

---
 src/pages/Appointments/AppointmentsPage.tsx | 75 ++++++++++-----------
 1 file changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/pages/Appointments/AppointmentsPage.tsx b/src/pages/Appointments/AppointmentsPage.tsx
index bd0cd2ed9a4..dfb7c5e1401 100644
--- a/src/pages/Appointments/AppointmentsPage.tsx
+++ b/src/pages/Appointments/AppointmentsPage.tsx
@@ -399,56 +399,53 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
                         : t("no_results")}
                     </CommandEmpty>
                     <CommandGroup>
-                      <PopoverClose className="w-full">
+                      <CommandItem
+                        value="all"
+                        onSelect={() =>
+                          setQParams({
+                            ...qParams,
+                            practitioner: null,
+                            slot: null,
+                          })
+                        }
+                        className="cursor-pointer w-full"
+                      >
+                        <PopoverClose className="w-full flex items-start">
+                          <span>{t("show_all")}</span>
+                          {!qParams.practitioner && (
+                            <CheckIcon className="ml-auto" />
+                          )}
+                        </PopoverClose>
+                      </CommandItem>
+                      {schedulableUsersQuery.data?.users.map((user) => (
                         <CommandItem
-                          value="all"
+                          key={user.id}
+                          value={formatName(user)}
                           onSelect={() =>
                             setQParams({
                               ...qParams,
-                              practitioner: null,
+                              practitioner: user.username,
                               slot: null,
                             })
                           }
-                          className="cursor-pointer"
+                          className="cursor-pointer w-full"
                         >
-                          <span>{t("show_all")}</span>
-                          {!qParams.practitioner && (
+                          <PopoverClose className="flex items-center gap-2 w-full">
+                            <Avatar
+                              imageUrl={user.profile_picture_url}
+                              name={formatName(user)}
+                              className="size-6 rounded-full"
+                            />
+                            <span>{formatName(user)}</span>
+                            <span className="text-xs text-gray-500 font-medium">
+                              {user.user_type}
+                            </span>
+                          </PopoverClose>
+                          {qParams.practitioner === user.username && (
                             <CheckIcon className="ml-auto" />
                           )}
                         </CommandItem>
-                      </PopoverClose>
-                      <div className="flex flex-col align-top">
-                        {schedulableUsersQuery.data?.users.map((user) => (
-                          <PopoverClose className="w-full" key={user.id}>
-                            <CommandItem
-                              value={formatName(user)}
-                              onSelect={() =>
-                                setQParams({
-                                  ...qParams,
-                                  practitioner: user.username,
-                                  slot: null,
-                                })
-                              }
-                              className="cursor-pointer"
-                            >
-                              <div className="flex items-center gap-2">
-                                <Avatar
-                                  imageUrl={user.profile_picture_url}
-                                  name={formatName(user)}
-                                  className="size-6 rounded-full"
-                                />
-                                <span>{formatName(user)}</span>
-                                <span className="text-xs text-gray-500 font-medium">
-                                  {user.user_type}
-                                </span>
-                              </div>
-                              {qParams.practitioner === user.username && (
-                                <CheckIcon className="ml-auto" />
-                              )}
-                            </CommandItem>
-                          </PopoverClose>
-                        ))}
-                      </div>
+                      ))}
                     </CommandGroup>
                   </CommandList>
                 </Command>