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
hotosm · Sep 10, 2024 · 9ff2392 · 9ff2392
1 parent ad9abad
commit 9ff2392
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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`}