From e29e08d3f1fd0772e1907bb2c1cca8baefbe8383 Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Wed, 10 Jul 2024 01:40:09 +0545
Subject: [PATCH] fix(frontend): avoid map legend overlay on small screens
 (dynamic size) (#1637)

* fix(accordion): padding fix

* fix(mapLegend): legend UI fix
---
 src/frontend/src/components/MapLegends.tsx    | 25 ++++++++-----------
 .../src/components/common/Accordion.tsx       |  2 +-
 src/frontend/src/views/ProjectDetailsV2.tsx   |  6 ++---
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/components/MapLegends.tsx b/src/frontend/src/components/MapLegends.tsx
index 3fde7ad969..9289a1a4f9 100755
--- a/src/frontend/src/components/MapLegends.tsx
+++ b/src/frontend/src/components/MapLegends.tsx
@@ -52,26 +52,23 @@ const MapLegends = ({ defaultTheme }: { defaultTheme: any }) => {
   const LegendListItem = ({ data }: { data: mapDetialsType }) => {
     return (
       <div className="fmtm-flex fmtm-items-center fmtm-gap-3">
-        <div className="fmtm-border-[1px] fmtm-border-gray-200">
-          {data.type !== 'locked' ? (
-            <CoreModules.IconButton
-              style={{ backgroundColor: data.color, borderRadius: 0 }}
-              color="primary"
-              component="label"
-              className="fmtm-w-7 fmtm-h-7 sm:fmtm-w-10 sm:fmtm-h-10"
-            ></CoreModules.IconButton>
-          ) : (
-            <AssetModules.LockIcon className="!fmtm-text-[28px] sm:!fmtm-text-[40px]" />
-          )}
-        </div>
-        <p className="fmtm-text-base sm:fmtm-text-lg">{data.value}</p>
+        {data.type !== 'locked' ? (
+          <div
+            style={{ backgroundColor: data.color, borderRadius: 0 }}
+            color="primary"
+            className="!fmtm-w-5 !fmtm-h-5 fmtm-border-[1px] fmtm-border-gray-200"
+          ></div>
+        ) : (
+          <AssetModules.LockIcon className="!fmtm-text-[20px]" />
+        )}
+        <p className="fmtm-text-base fmtm-text-[#494949]">{data.value}</p>
       </div>
     );
   };
 
   return (
     <div className="fmtm-py-3">
-      <div className="fmtm-flex fmtm-flex-col fmtm-gap-2 sm:fmtm-gap-4">
+      <div className="fmtm-flex fmtm-flex-col fmtm-gap-2">
         {MapDetails.map((data, index) => {
           return <LegendListItem data={data} key={index} />;
         })}
diff --git a/src/frontend/src/components/common/Accordion.tsx b/src/frontend/src/components/common/Accordion.tsx
index 6fd0c17519..976cccaec0 100644
--- a/src/frontend/src/components/common/Accordion.tsx
+++ b/src/frontend/src/components/common/Accordion.tsx
@@ -33,7 +33,7 @@ export default function Accordion({
       <div className="">
         <div
           className={`fmtm-flex fmtm-items-center fmtm-justify-between
-            fmtm-w-full fmtm-font-bold fmtm-gap-3 fmtm-cursor-pointer fmtm-text-2xl fmtm-py-[0px] sm:fmtm-py-2  fmtm-border-[#929DB3] ${
+            fmtm-w-full fmtm-font-bold fmtm-gap-3 fmtm-cursor-pointer fmtm-text-2xl fmtm-py-[0px] sm:fmtm-py-1  fmtm-border-[#929DB3] ${
               collapsed ? 'fmtm-border-b-[0px]' : 'fmtm-border-b-[2px]'
             }`}
           onClick={() => {
diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx
index dd35226aee..9b23bf358a 100644
--- a/src/frontend/src/views/ProjectDetailsV2.tsx
+++ b/src/frontend/src/views/ProjectDetailsV2.tsx
@@ -509,14 +509,14 @@ const ProjectDetailsV2 = () => {
                 popupId="locked-popup"
                 className="fmtm-w-[235px]"
               />
-              <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-5 fmtm-left-3 fmtm-z-50 fmtm-rounded-lg">
+              <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-3 fmtm-left-3 fmtm-z-50 fmtm-rounded-lg">
                 <Accordion
                   ref={legendRef}
                   body={<MapLegends defaultTheme={defaultTheme} />}
                   header={
                     <div className="fmtm-flex fmtm-items-center fmtm-gap-1 sm:fmtm-gap-2">
-                      <AssetModules.LegendToggleIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '30px' }} />
-                      <p className="fmtm-text-lg fmtm-font-normal">Legend</p>
+                      <AssetModules.LegendToggleIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '25px' }} />
+                      <p className="fmtm-text-base fmtm-font-normal">LEGEND</p>
                     </div>
                   }
                   onToggle={() => {