chores: Fixed responsiveness of the expanded sort dropdown in the patients page

src/Components/Auth/Login.tsx

@@ -308,6 +308,7 @@ export const Login = (props: { forgot?: boolean }) => {
                       value={form.password}
                       onChange={handleChange}
                       error={errors.password}
+                      outerClassName="mb-4"
                       size="large"
                       className="font-extrabold"
                     />

src/Components/Common/Export.tsx

@@ -97,7 +97,7 @@ export const ExportButton = ({
         onClick={() =>
           exportFile(props.action, props.filenamePrefix, type, parse)
         }
-        className="tooltip mx-2 p-4 text-lg text-secondary-800 disabled:bg-transparent disabled:text-secondary-500"
+        className="tooltip mx-2 text-lg text-secondary-800 disabled:bg-transparent disabled:text-secondary-500"
         variant="secondary"
         ghost
         circle

src/Components/Common/SortDropdown.tsx

@@ -12,6 +12,7 @@ interface Props {
   options: SortOption[];
   onSelect: (query: { ordering: string }) => void;
   selected?: string;
+  className?: string;
 }
 
 /**
@@ -23,7 +24,11 @@ export default function SortDropdownMenu(props: Props) {
     <DropdownMenu
       title={props.label ?? t("sort_by")}
       variant="secondary"
-      className="border border-primary-500 bg-white"
+      className={
+        props.className
+          ? props.className + " border  border-primary-500 bg-white"
+          : " border  border-primary-500 bg-white"
+      }
       icon={<CareIcon icon="l-sort" />}
     >
       {props.options.map(({ isAscending, value }) => (

src/Components/Common/components/Menu.tsx

@@ -52,7 +52,7 @@ export default function DropdownMenu({
         </Menu.Button>
         <DropdownTransition>
           <Menu.Items
-            className={`absolute right-0 z-10 mt-2 min-w-full origin-top-right rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none sm:min-w-[250px] md:w-max ${props.itemClassName}`}
+            className={`absolute right-[-8rem] z-10 ml-[400px] mt-2 min-w-max origin-top-right rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none sm:right-0 sm:min-w-[250px] md:right-0 md:w-max ${props.itemClassName}`}
           >
             <>{props.children}</>
           </Menu.Items>

src/Components/Patient/ManagePatients.tsx

@@ -756,7 +756,7 @@ export const PatientManager = () => {
               </p>
             </ButtonV2>
           </div>
-          <div className="flex w-full flex-col items-center justify-end gap-2 lg:ml-3 lg:w-fit lg:flex-row lg:gap-3">
+          <div className="flex flex-col items-center justify-end gap-2  vs:w-full lg:ml-[12%] lg:w-fit lg:flex-row lg:gap-3">
             <SwitchTabs
               tab1="Live"
               tab2="Discharged"
@@ -800,53 +800,68 @@ export const PatientManager = () => {
                 <p className="lg:my-[2px]">Doctor Connect</p>
               </ButtonV2>
             )}
-
-            <AdvancedFilterButton
-              onClick={() => advancedFilter.setShow(true)}
-            />
-            <SortDropdownMenu
-              options={PATIENT_SORT_OPTIONS}
-              selected={qParams.ordering}
-              onSelect={updateQuery}
-            />
-            <div className="tooltip">
-              {!isExportAllowed ? (
-                <ButtonV2
-                  onClick={() => {
-                    advancedFilter.setShow(true);
-                    setTimeout(() => {
-                      const element =
-                        document.getElementById("bed-type-select");
-                      if (element)
-                        element.scrollIntoView({ behavior: "smooth" });
-                      Notification.Warn({
-                        msg: "Please select a seven day period.",
-                      });
-                    }, 500);
-                  }}
-                  className="mr-5 w-full lg:w-fit"
-                >
-                  <CareIcon icon="l-export" />
-                  <span className="lg:my-[3px]">Export</span>
-                </ButtonV2>
-              ) : (
-                <ExportMenu
-                  disabled={!isExportAllowed}
-                  exportItems={[
-                    {
-                      label: "Export Live patients",
-                      action: exportPatients(true),
-                      parse: preventDuplicatePatientsDuetoPolicyId,
-                    },
-                  ]}
+            <div className="vs:block vs:w-full  vs:justify-center sm:mr-0  sm:flex sm:w-full sm:justify-between md:mr-8  md:flex md:w-fit lg:flex">
+              <AdvancedFilterButton
+                onClick={() => advancedFilter.setShow(true)}
+              />
+              <div className="flex vs:mt-4 vs:w-full vs:justify-between  sm:ml-6 sm:mt-0 sm:w-[65%] md:ml-3 md:w-fit lg:mt-0">
+                <SortDropdownMenu
+                  options={PATIENT_SORT_OPTIONS}
+                  selected={qParams.ordering}
+                  onSelect={updateQuery}
+                  className="vs:w-[125%] md:w-full lg:w-[100%]"
                 />
-              )}
+                <div className="tooltip ml-4 w-[45%]">
+                  {!isExportAllowed ? (
+                    <ButtonV2
+                      onClick={() => {
+                        advancedFilter.setShow(true);
+                        setTimeout(() => {
+                          const element =
+                            document.getElementById("bed-type-select");
+                          if (element)
+                            element.scrollIntoView({ behavior: "smooth" });
+                          Notification.Warn({
+                            msg: "Please select a seven day period.",
+                          });
+                        }, 500);
+                      }}
+                      // fixed issue
+                      className="mr-5 vs:w-[100%]  lg:w-fit"
+                    >
+                      <CareIcon icon="l-plus" className="text-lg" />
+                      <span className="my-[3px] sm:my-0 md:my-0 lg:my-[3px]">
+                        Export
+                      </span>
+                    </ButtonV2>
+                  ) : (
+                    <ExportMenu
+                      disabled={!isExportAllowed}
+                      exportItems={[
+                        {
+                          label:
+                            tabValue === 0
+                              ? "Live patients"
+                              : "Discharged patients",
+                          action: exportPatients(true),
+                          parse: preventDuplicatePatientsDuetoPolicyId,
+                        },
+                        {
+                          label: "All patients",
+                          action: exportPatients(false),
+                          parse: preventDuplicatePatientsDuetoPolicyId,
+                        },
+                      ]}
+                    />
+                  )}
 
-              {!isExportAllowed && (
-                <span className="tooltip-text tooltip-bottom -translate-x-1/2">
-                  Select a seven day period
-                </span>
-              )}
+                  {!isExportAllowed && (
+                    <span className="tooltip-text tooltip-bottom -translate-x-1/2">
+                      Select a seven day period
+                    </span>
+                  )}
+                </div>
+              </div>
             </div>
           </div>
         </div>