feat(header): add horizontal scrolling for overflowing tabs on mobile

src/components/header/header.module.css

@@ -48,8 +48,8 @@
 
 @media (max-width: 768px) {
   .container {
-    padding-bottom: 20px;
-    height: 45.5px;
+    padding-bottom: 2px;
+    height: 45px;
   }
 
   .reducedHeight {
@@ -67,7 +67,7 @@
 
 @media (min-width: 768px) {
   .container {
-    height: 45.5px;
+    height: 45px;
   }
 
   .temporary {
@@ -78,7 +78,7 @@
 
 .tabs {
   display: flex;
-  align-items: baseline !important;
+  margin-bottom: -1px;
 }
 
 .pageName {
@@ -134,7 +134,7 @@
   color: var(--green);
   background-color: var(--background);
   border: 1px solid var(--border-primary);
-  border-bottom: 2px solid var(--background);
+  border-bottom: 1px solid var(--background);
 }
 
 .tabMenu li .choice {
@@ -143,6 +143,20 @@
   border-bottom: 0px solid var(--border-primary);
 }
 
+.tabs {
+  overflow-x: auto; /* Enables horizontal scrolling */
+  scrollbar-width: none; /* Hides the scrollbar in Firefox */
+  -ms-overflow-style: none;  /* Hides the scrollbar in IE and Edge */
+}
+
+.tabs::-webkit-scrollbar {
+  display: none; /* Hides the scrollbar in WebKit-based browsers */
+}
+
+.tabMenu li {
+  display: inline-flex;
+}
+
 
 @media (min-width: 768px) {
   .about {
@@ -155,11 +169,6 @@
 }
 
 @media (max-width: 768px) {
-  .tabs {
-    position: absolute;
-    margin-bottom: -20px;
-  }
-
   .fewTabs {
     position: relative;
     margin-bottom: 0;

src/components/header/header.tsx

@@ -124,6 +124,30 @@ const AuthorHeaderTabs = () => {
           submitted
         </Link>
       </li>
+      {isProfile && (
+        <>
+          <li>
+            <Link to={overviewLink} className={styles.choice}>
+              upvoted
+            </Link>
+          </li>
+          <li>
+            <Link to={overviewLink} className={styles.choice}>
+              downvoted
+            </Link>
+          </li>
+          <li>
+            <Link to={overviewLink} className={styles.choice}>
+              hidden
+            </Link>
+          </li>
+          <li>
+            <Link to={overviewLink} className={styles.choice}>
+              saved
+            </Link>
+          </li>
+        </>
+      )}
     </>
   );
 };
@@ -196,6 +220,7 @@ const Header = () => {
   const subplebbit = useSubplebbit({ subplebbitAddress: params.subplebbitAddress });
   const { suggested, title, shortAddress } = subplebbit || {};
 
+  const isMobile = window.innerWidth < 768;
   const isAbout = isAboutView(location.pathname);
   const isAll = isAllView(location.pathname);
   const isAuthor = isAuthorView(location.pathname);
@@ -233,13 +258,23 @@ const Header = () => {
             <SubscribeButton address={params.subplebbitAddress} />
           </span>
         )}
+      {!isMobile && (
         <div className={`${styles.tabs} ${hasFewTabs ? styles.fewTabs : ''}`}>
           <ul className={styles.tabMenu}>
             <HeaderTabs />
             {(isSubplebbit || isSubplebbitSubmit || isPost || isProfile || isAuthor) && <AboutButton />}
           </ul>
         </div>
+      )}
       </div>
+      {isMobile && (
+        <div className={`${styles.tabs} ${hasFewTabs ? styles.fewTabs : ''}`}>
+          <ul className={styles.tabMenu}>
+            <HeaderTabs />
+            {(isSubplebbit || isSubplebbitSubmit || isPost || isProfile || isAuthor) && <AboutButton />}
+          </ul>
+        </div>
+      )}
     </div>
   );
 };