From 58456f83cafe21d675720dad23a91bbf144c5bbb Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Mon, 23 Dec 2024 10:32:13 +0530
Subject: [PATCH] feat: add scrollable container for explore items and hide
 scrollbars

- Updated `.exploreMainContainer` to include `max-height` and hide scrollbars using `::-webkit-scrollbar`.
- Introduced a new `.exploreItemsContainer` class with `max-height` and `overflow-y: auto` to enable scrolling for the content.
- Adjusted styles for responsiveness in `xsPhoneView` to support dynamic heights for mobile views.
---
 .../MapFeatureExplorer.module.scss            | 19 +++++++++++++++++++
 .../MapFeatureExplorer/MapSettings.tsx        |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss
index 9305e629a8..80331c4e32 100644
--- a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss
+++ b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss
@@ -14,9 +14,15 @@
   margin-top: 10px;
   padding: 12px;
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
+  max-height: 485px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   @include xsPhoneView {
     position: absolute;
+    max-height: max-content;
     min-width: 293px;
     border-radius: unset;
     right: 0px;
@@ -24,6 +30,19 @@
   }
 }
 
+.exploreItemsContainer {
+  max-height: 400px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include xsPhoneView {
+    max-height: max-content;
+  }
+}
+
 .exploreFeatureMobileHeader {
   display: flex;
   justify-content: space-between;
diff --git a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx
index 43b28c4b2a..c9769ce33c 100644
--- a/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx
+++ b/src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx
@@ -91,7 +91,7 @@ const MapSettings: FC<MapSettingsProps> = ({
   return (
     <div className={styles.exploreMainContainer}>
       <div>
-        <div>
+        <div className={styles.exploreItemsContainer}>
           {/* <MapLayerToggle
             label={tAllProjects('currentForests')}
             switchComponent={