From bcd78635e0f8a3fa0199bea01c9ae722a4dc879d Mon Sep 17 00:00:00 2001
From: kaf-lamed-beyt <belac335@gmail.com>
Date: Sun, 3 Mar 2024 20:16:11 +0100
Subject: [PATCH] feat: fix alphabet filter to top on scroll

---
 app/components/AlphabetFilter/AlphabetFilter.js | 2 ++
 app/components/pages/ProjectsPage.js            | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/AlphabetFilter/AlphabetFilter.js b/app/components/AlphabetFilter/AlphabetFilter.js
index 7b5c513e..75961bd5 100644
--- 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
index 5522b65c..91e84d41 100644
--- 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