Merge pull request #293 from kaf-lamed-beyt/web-dev

feat: fix alphabet filter to top on scroll on mobile devices
acekyd · Mar 4, 2024 · 3cb2bbd · 3cb2bbd
2 parents a9b1790 + bcd7863
commit 3cb2bbd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/app/components/AlphabetFilter/AlphabetFilter.js b/app/components/AlphabetFilter/AlphabetFilter.js
@@ -40,6 +40,7 @@ const AlphabetFilter = ({
     gridClasses.borderBottom = "0.5px solid #E2E3E3";
     gridClasses.pb = "1rem";
     gridClasses.width = "100vw";
+    gridClasses.height = "280px";
   }
 
   const collapseCode = isExpanded ? (
@@ -76,6 +77,7 @@ const AlphabetFilter = ({
               key={letter}
               borderLeft="0.5px solid #E2E3E3"
               padding="0 0.2rem"
+              height="fit-content"
             >
               <Button
                 background="none"

diff --git a/app/components/pages/ProjectsPage.js b/app/components/pages/ProjectsPage.js
@@ -178,9 +178,10 @@ const ProjectsPage = (props) => {
       </Box>
 
       <Box
-        position="sticky"
-        top="90"
         zIndex={1}
+        height={isStuck && "80px"}
+        position={isStuck ? "fixed" : "static"}
+        top={isStuck ? { lg: "25px", md: "17px", xl: "17px" } : "90px"}
         display={{ base: "flex", md: "none" }}
       >
         <AlphabetFilter