From 727455ec3867963c82f3937128a91256e4525b1b Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Tue, 19 Nov 2024 14:56:45 +0530
Subject: [PATCH] fix: resolves scrolling issues on list/details pages

- scrolling issues were visible on iOS, but could affect any OS
---
 .../ProjectsLayout/ProjectsLayout.module.scss | 46 ++++++++-----------
 .../ProjectDetails/ProjectDetails.module.scss |  3 +-
 .../styles/ProjectInfo.module.scss            |  2 +-
 .../ProjectsMap/ProjectsMap.module.scss       |  4 +-
 .../projectsV2/ProjectsSection.module.scss    |  6 ++-
 5 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/features/common/Layout/ProjectsLayout/ProjectsLayout.module.scss b/src/features/common/Layout/ProjectsLayout/ProjectsLayout.module.scss
index be2720c0a..76e99496f 100644
--- a/src/features/common/Layout/ProjectsLayout/ProjectsLayout.module.scss
+++ b/src/features/common/Layout/ProjectsLayout/ProjectsLayout.module.scss
@@ -4,6 +4,9 @@
 $layoutPaddingTop: 24px;
 $layoutPaddingSide: 20px;
 $layoutPaddingBottom: 30px;
+$topMobileNavigationSpace: 77px;
+$bottomMobileFooterSpace: 49px;
+
 .impersonationMode,
 .embedMode,
 .projectsLayout {
@@ -55,42 +58,31 @@ $layoutPaddingBottom: 30px;
 }
 
 // styles for mobile layout
-
 .mobileProjectsLayout {
-  width: 100%;
-  height: calc(100vh - 58px);
-  position: relative;
+  position: fixed;
+  top: $topMobileNavigationSpace;
+  left: 0;
+  right: 0;
+  bottom: $bottomMobileFooterSpace;
   display: flex;
-  justify-content: center;
-  margin-top: 58px;
-  padding-top: $layoutPaddingTop;
+  flex-direction: column;
   overflow: hidden;
-  &.mapMode {
-    height: 100vh;
-    margin-top: 0px;
-    padding-top: 0px;
-  }
-}
+  background: white;
+  padding-top: 24px;
 
-.viewButton {
-  position: absolute;
-  top: 13px;
-  right: 20px;
-  z-index: 1;
-  &.viewButtonShifted {
-    top: 95px;
+  &.mapMode {
+    top: 0;
+    padding-top: 0;
   }
 }
 
 .mobileContentContainer {
-  padding: 0px 12px;
-  height: 100%;
+  flex: 1;
+  position: relative;
   width: 100%;
-  margin-top: 20px;
-  @include xsPhoneView {
-    padding: 0px;
-    margin-top: 20px;
-  }
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: auto;
 }
 
 .mobileMapContainer {
diff --git a/src/features/projectsV2/ProjectDetails/ProjectDetails.module.scss b/src/features/projectsV2/ProjectDetails/ProjectDetails.module.scss
index e41cbb398..f8ed2955e 100644
--- a/src/features/projectsV2/ProjectDetails/ProjectDetails.module.scss
+++ b/src/features/projectsV2/ProjectDetails/ProjectDetails.module.scss
@@ -20,7 +20,8 @@
       display: none;
     }
     padding-right: 0px;
-    padding-bottom: 100px;
+    padding-bottom: 20px;
+    height: 100%;
   }
 }
 
diff --git a/src/features/projectsV2/ProjectDetails/styles/ProjectInfo.module.scss b/src/features/projectsV2/ProjectDetails/styles/ProjectInfo.module.scss
index 953215af4..ef8ac80a4 100644
--- a/src/features/projectsV2/ProjectDetails/styles/ProjectInfo.module.scss
+++ b/src/features/projectsV2/ProjectDetails/styles/ProjectInfo.module.scss
@@ -13,7 +13,7 @@
   @include xsPhoneView {
     box-shadow: none;
     margin-left: 0px;
-    padding: 15px 30px;
+    padding: 15px 24px 0;
   }
 }
 
diff --git a/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss b/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss
index d05ac6229..6f755dec2 100644
--- a/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss
+++ b/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss
@@ -3,7 +3,7 @@
 .projectListControlsContainer {
   position: absolute;
   width: 100%;
-  top: 102px;
+  top: 101px;
   z-index: 2;
 }
 
@@ -12,7 +12,7 @@
   position: absolute;
   align-items: center;
   gap: 34px;
-  top: 114px;
+  top: 101px;
   right: 10px;
   z-index: 2px;
 
diff --git a/src/features/projectsV2/ProjectsSection.module.scss b/src/features/projectsV2/ProjectsSection.module.scss
index 60766755c..714509e02 100644
--- a/src/features/projectsV2/ProjectsSection.module.scss
+++ b/src/features/projectsV2/ProjectsSection.module.scss
@@ -1,4 +1,7 @@
 @import '../../theme/theme';
+
+$bottomFooterSpace: 49px;
+
 // temporary file will be deleted later
 .projectList {
   display: flex;
@@ -21,7 +24,8 @@
     &::-webkit-scrollbar {
       display: none;
     }
-    padding: 0px 9px 100px;
+    height: calc(100% - $bottomFooterSpace);
+    padding: 0px 9px 20px;
   }
 }