From 9ff2392f419dc46590dbc6d0474223ca098d724c Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Tue, 10 Sep 2024 14:49:29 +0545
Subject: [PATCH] fix(frontend): map ui alignment on various devices (#1772)

* fix(taskSelectionPopup): fix popup alignment in medium screen

* fix(offlineReadyPrompt): shift of projectDetails UI upwards showing white gap below
---
 .../src/components/OfflineReadyPrompt.tsx     | 20 ++++++++++---------
 .../ProjectDetailsV2/TaskSelectionPopup.tsx   |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/OfflineReadyPrompt.tsx b/src/frontend/src/components/OfflineReadyPrompt.tsx
index 3d3ee963f6..5e12411f90 100644
--- a/src/frontend/src/components/OfflineReadyPrompt.tsx
+++ b/src/frontend/src/components/OfflineReadyPrompt.tsx
@@ -31,19 +31,21 @@ function OfflineReadyPrompt() {
   }, [offlineReady]);
 
   return (
-    <div className="OfflineReadyPrompt-container">
+    <>
       {offlineReady && (
-        <div className="OfflineReadyPrompt-toast">
-          <div className="OfflineReadyPrompt-message">
-            <span>App ready to work offline</span>
+        <div className="OfflineReadyPrompt-container">
+          <div className="OfflineReadyPrompt-toast">
+            <div className="OfflineReadyPrompt-message">
+              <span>App ready to work offline</span>
+            </div>
+            <button className="OfflineReadyPrompt-toast-button" onClick={() => close()}>
+              Close
+            </button>
           </div>
-          <button className="OfflineReadyPrompt-toast-button" onClick={() => close()}>
-            Close
-          </button>
+          <div className="OfflineReadyPrompt-date">{buildDate}</div>
         </div>
       )}
-      <div className="OfflineReadyPrompt-date">{buildDate}</div>
-    </div>
+    </>
   );
 }
 
diff --git a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
index df7e13b5e9..c941ce10fb 100644
--- a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
+++ b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
@@ -56,7 +56,7 @@ const TaskSelectionPopup = ({ taskId, body, feature }: TaskSelectionPopupPropTyp
     <div
       className={`fmtm-duration-1000 fmtm-z-[10002] fmtm-h-fit ${
         taskModalStatus
-          ? 'fmtm-bottom-[4.4rem] md:fmtm-top-[50%] md:-fmtm-translate-y-[35%] fmtm-right-0 fmtm-w-[100vw] md:fmtm-w-[50vw] md:fmtm-max-w-[25rem]'
+          ? 'fmtm-bottom-[4.4rem] sm:fmtm-bottom-0 lg:fmtm-top-[50%] md:-fmtm-translate-y-[35%] fmtm-right-0 fmtm-w-[100vw] md:fmtm-w-[50vw] md:fmtm-max-w-[25rem]'
           : 'fmtm-top-[calc(100vh)] md:fmtm-top-[calc(40vh)] md:fmtm-left-[calc(100vw)] fmtm-w-[100vw]'
       } fmtm-fixed
         fmtm-rounded-t-3xl fmtm-border-opacity-50`}