From 4b848f26dd4682d0ef10d65ffc76d36a9a8a4459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Gonz=C3=A1lez-Albo?=
 <94169588+dg-ac@users.noreply.github.com>
Date: Thu, 12 Dec 2024 05:09:30 +0100
Subject: [PATCH] FIX: Makes footer/navigator scrollable when there are too
 many sheets (#180)

---
 .../src/components/navigation/navigation.tsx  | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/navigation/navigation.tsx b/webapp/src/components/navigation/navigation.tsx
index 8d1470a..66e40e6 100644
--- a/webapp/src/components/navigation/navigation.tsx
+++ b/webapp/src/components/navigation/navigation.tsx
@@ -2,6 +2,7 @@ import { styled } from "@mui/material";
 import { Menu, Plus } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { theme } from "../../theme";
 import { NAVIGATION_HEIGH } from "../constants";
 import { StyledButton } from "../toolbar";
 import type { WorkbookState } from "../workbookState";
@@ -101,12 +102,19 @@ const Container = styled("div")`
   padding-left: 12px;
   font-family: Inter;
   background-color: #fff;
-  border-top: 1px solid #E0E0E0;
+  border-top: 1px solid #e0e0e0;
 `;
 
 const Sheets = styled("div")`
   flex-grow: 2;
   overflow: hidden;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-scroll: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 `;
 
 const SheetInner = styled("div")`
@@ -114,10 +122,20 @@ const SheetInner = styled("div")`
 `;
 
 const Advert = styled("a")`
+  display: flex;
+  align-items: center;
   color: #f2994a;
-  margin-right: 12px;
+  padding: 0px 12px;
   font-size: 12px;
   text-decoration: none;
+  border-left: 1px solid ${theme.palette.grey["300"]};
+  transition: color 0.2s ease-in-out;
+  &:hover {
+    text-decoration: underline;
+  }
+  @media (max-width: 769px) {
+    height: 100%;
+  }
 `;
 
 export default Navigation;