fix: DateInput and Actions button not optimised for mobile viewports

src/components/Common/DateInputV2.tsx

@@ -348,7 +348,7 @@ const DateInputV2: React.FC<Props> = ({
     const right = popOverX > viewportWidth - (allowTime ? 420 : 300);
     const top = popOverY > viewportHeight - 400;
 
-    return `${right ? "md:-translate-x-1/2" : ""} ${top ? "md:-translate-y-[calc(100%+50px)]" : ""}`;
+    return `${right ? "sm:-translate-x-1/2" : ""} ${top ? "md:-translate-y-[calc(100%+50px)]" : ""} ${right ? "max-sm:-translate-x-1/2" : ""} ${top ? "max-sm:-translate-y-[calc(100%+50px)]" : ""}`.trim();
   };
 
   const domValue = useValueInjectionObserver<string>({

src/components/Patient/PatientHome.tsx

@@ -456,7 +456,7 @@ export const PatientHome = (props: {
           </div>
           <div className="sticky top-20 mt-8 h-full lg:basis-1/6">
             <section className="mb-4 space-y-2 md:flex">
-              <div className="mx-3 w-full lg:mx-0">
+              <div className="mx-auto w-full lg:mx-0">
                 <div className="font-semibold text-secondary-900">
                   {t("actions")}
                 </div>