From 5a79e07c2d9a5da69c9b1b149c27fd4aee9b7ae1 Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Fri, 26 Nov 2021 15:20:30 +0200
Subject: [PATCH] Fix scrollbars

---
 components/EditorNavigation.tsx | 12 +++++++++++-
 components/Footer.tsx           |  2 +-
 components/Navigation.tsx       |  4 ++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/EditorNavigation.tsx b/components/EditorNavigation.tsx
index 6ba5752..e3e3dcf 100644
--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -71,7 +71,17 @@ const EditorNavigation = () => {
   }, [session, popup]);
   return (
     <Flex css={{ flexShrink: 0, gap: "$0" }}>
-      <Flex css={{ overflowX: "scroll", py: "$3", flex: 1 }}>
+      <Flex
+        css={{
+          overflowX: "scroll",
+          py: "$3",
+          flex: 1,
+          "&::-webkit-scrollbar": {
+            height: 0,
+            background: "transparent",
+          },
+        }}
+      >
         <Container css={{ flex: 1 }}>
           <Stack
             css={{
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 38db870..fb93639 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -53,7 +53,7 @@ const Footer = () => {
             fontSize: "13px",
             fontWeight: "$body",
             fontFamily: "$monospace",
-            overflowY: "scroll",
+            overflowY: "auto",
             wordWrap: "break-word",
             py: 3,
           }}
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 6af4c64..c1e0cc1 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -314,6 +314,10 @@ const Navigation = () => {
             flexWrap: "nowrap",
             marginLeft: "$4",
             overflowX: "scroll",
+            "&::-webkit-scrollbar": {
+              height: 0,
+              background: "transparent",
+            },
           }}
         >
           <Stack