From 975ff06a0b7fa734d405abe6bc87c1cd4960bce9 Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Tue, 12 Dec 2023 10:56:24 +0100
Subject: [PATCH 1/2] fix: add custom styles and overflow to avoid collapse of
 UI when selecting tabs on smaller screens

---
 apps/website/src/app/learn/page.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
index 3af8a2796..f29cf5b9c 100644
--- a/apps/website/src/app/learn/page.tsx
+++ b/apps/website/src/app/learn/page.tsx
@@ -290,17 +290,16 @@ await verifyProof(verificationKey, fullProof)`,
                     mt={{ base: "100px", md: "170px" }}
                     mb={{ base: "50px", md: "112px" }}
                 >
-                    <Box overflow="auto" mx="3">
-                        <TabList gap="40px" w="max-content" whiteSpace="nowrap">
-                            <Tab px={0} fontSize="24px">
+                    <Box mx="3" overflowX={{ base: "auto", md: "hidden" }}>
+                        <TabList gap="40px" w={{ base: "150%", md: "max-content" }} whiteSpace="nowrap" pl="4">
+                            <Tab px={0} fontSize="24px" _selected={{ borderBottom: "2px solid white" }}>
                                 About Semaphore
                             </Tab>
-                            <Tab px={0} fontSize="24px">
+                            <Tab px={0} fontSize="24px" _selected={{ borderBottom: "2px solid white" }}>
                                 About Zero Knowledge
                             </Tab>
                         </TabList>
                     </Box>
-                    <TabIndicator mt="-1.5px" height="2px" bg="white" borderRadius="1px" />
                     <TabPanels mt="80px">
                         <TabPanel>{renderTabBlockSemaphore()}</TabPanel>
                         <TabPanel>{renderTabBlockZeroKnowledge()}</TabPanel>

From fd95c3dc90b06e4c1588ee67930899a68ca29efe Mon Sep 17 00:00:00 2001
From: Jeeiii <giacomo.corrias7@gmail.com>
Date: Tue, 12 Dec 2023 14:13:06 +0100
Subject: [PATCH 2/2] refactor: back to previous Box and TabList properties

---
 apps/website/src/app/learn/page.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
index f29cf5b9c..b7f2dc046 100644
--- a/apps/website/src/app/learn/page.tsx
+++ b/apps/website/src/app/learn/page.tsx
@@ -8,7 +8,6 @@ import {
     TabPanels,
     Tab,
     TabPanel,
-    TabIndicator,
     Divider,
     Box,
     Image
@@ -290,8 +289,8 @@ await verifyProof(verificationKey, fullProof)`,
                     mt={{ base: "100px", md: "170px" }}
                     mb={{ base: "50px", md: "112px" }}
                 >
-                    <Box mx="3" overflowX={{ base: "auto", md: "hidden" }}>
-                        <TabList gap="40px" w={{ base: "150%", md: "max-content" }} whiteSpace="nowrap" pl="4">
+                    <Box overflow="auto" mx="3">
+                        <TabList gap="40px" w="max-content" whiteSpace="nowrap">
                             <Tab px={0} fontSize="24px" _selected={{ borderBottom: "2px solid white" }}>
                                 About Semaphore
                             </Tab>