From 67ffd3f1b410548781a4e8931930664c1f5cc804 Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Tue, 28 Jun 2022 14:01:08 +0300
Subject: [PATCH 1/3] Fix #215 scrollbar issues

---
 components/EditorNavigation.tsx | 39 ++++++++++++++++++++++++---------
 components/Navigation.tsx       |  2 ++
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/components/EditorNavigation.tsx b/components/EditorNavigation.tsx
index 5220298..32b19ec 100644
--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import {
   Plus,
   Share,
@@ -101,7 +101,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
       if (!filename) {
         return { error: "You need to add filename" };
       }
-      if (snap.files.find(file => file.name === filename)) {
+      if (snap.files.find((file) => file.name === filename)) {
         return { error: "Filename already exists." };
       }
 
@@ -132,22 +132,41 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
     createNewFile(filename);
     setFilename("");
   }, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
-
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const files = snap.files;
   return (
     <Flex css={{ flexShrink: 0, gap: "$0" }}>
       <Flex
+        id="kissa"
+        ref={scrollRef}
         css={{
           overflowX: "scroll",
+          overflowY: "hidden",
           py: "$3",
+          pb: "$0",
           flex: 1,
           "&::-webkit-scrollbar": {
-            height: 0,
-            background: "transparent",
+            height: "0.31em",
+            background: "rgba(0,0,0,.1)",
           },
+          "&::-webkit-scrollbar-gutter": "stable",
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: "rgba(255,255,255,.3)",
+            outline: "0px",
+            borderRadius: "9999px",
+          },
+          scrollbarColor: "rgba(255,255,255,.3) rgba(0,0,0,.1)",
+          scrollbarGutter: "stable",
+          scrollbarWidth: "thin",
+        }}
+        onWheelCapture={(e) => {
+          if (scrollRef.current) {
+            scrollRef.current.scrollLeft += e.deltaY;
+          }
         }}
       >
-        <Container css={{ flex: 1 }}>
+        <Container css={{ flex: 1 }} ref={containerRef}>
           <Stack
             css={{
               gap: "$3",
@@ -233,8 +252,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                     <Label>Filename</Label>
                     <Input
                       value={filename}
-                      onChange={e => setFilename(e.target.value)}
-                      onKeyPress={e => {
+                      onChange={(e) => setFilename(e.target.value)}
+                      onKeyPress={(e) => {
                         if (e.key === "Enter") {
                           handleConfirm();
                         }
@@ -509,8 +528,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               type="number"
               min="1"
               value={editorSettings.tabSize}
-              onChange={e =>
-                setEditorSettings(curr => ({
+              onChange={(e) =>
+                setEditorSettings((curr) => ({
                   ...curr,
                   tabSize: Number(e.target.value),
                 }))
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index e7dc7db..dfa24f1 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -340,6 +340,8 @@ const Navigation = () => {
               height: 0,
               background: "transparent",
             },
+            scrollbarColor: "transparent",
+            scrollbarWidth: "none",
           }}
         >
           <Stack

From 3136de1bd138dc798e61faea864425e84dfd6ad6 Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Tue, 28 Jun 2022 14:38:59 +0300
Subject: [PATCH 2/3] Slight style adjustments

---
 components/EditorNavigation.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/components/EditorNavigation.tsx b/components/EditorNavigation.tsx
index 32b19ec..beacb6d 100644
--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -147,18 +147,32 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
           pb: "$0",
           flex: 1,
           "&::-webkit-scrollbar": {
-            height: "0.31em",
-            background: "rgba(0,0,0,.1)",
+            height: "0.3em",
+            background: "rgba(0,0,0,.0)",
           },
           "&::-webkit-scrollbar-gutter": "stable",
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "rgba(255,255,255,.3)",
+            backgroundColor: "rgba(0,0,0,.1)",
             outline: "0px",
             borderRadius: "9999px",
           },
-          scrollbarColor: "rgba(255,255,255,.3) rgba(0,0,0,.1)",
+          scrollbarColor: "rgba(0,0,0,.1) rgba(0,0,0,0)",
           scrollbarGutter: "stable",
           scrollbarWidth: "thin",
+          ".dark &": {
+            "&::-webkit-scrollbar": {
+              background: "rgba(0,0,0,.0)",
+            },
+            "&::-webkit-scrollbar-gutter": "stable",
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: "rgba(255,255,255,.1)",
+              outline: "0px",
+              borderRadius: "9999px",
+            },
+            scrollbarColor: "rgba(255,255,255,.1) rgba(0,0,0,0)",
+            scrollbarGutter: "stable",
+            scrollbarWidth: "thin",
+          },
         }}
         onWheelCapture={(e) => {
           if (scrollRef.current) {

From 3a1159cffc49b236e0d5a373a04cb03ca5024879 Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Tue, 28 Jun 2022 14:49:34 +0300
Subject: [PATCH 3/3] Make thumbs more visible

---
 components/EditorNavigation.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/EditorNavigation.tsx b/components/EditorNavigation.tsx
index beacb6d..0296ee7 100644
--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -152,11 +152,11 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
           },
           "&::-webkit-scrollbar-gutter": "stable",
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "rgba(0,0,0,.1)",
+            backgroundColor: "rgba(0,0,0,.2)",
             outline: "0px",
             borderRadius: "9999px",
           },
-          scrollbarColor: "rgba(0,0,0,.1) rgba(0,0,0,0)",
+          scrollbarColor: "rgba(0,0,0,.2) rgba(0,0,0,0)",
           scrollbarGutter: "stable",
           scrollbarWidth: "thin",
           ".dark &": {
@@ -165,11 +165,11 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
             },
             "&::-webkit-scrollbar-gutter": "stable",
             "&::-webkit-scrollbar-thumb": {
-              backgroundColor: "rgba(255,255,255,.1)",
+              backgroundColor: "rgba(255,255,255,.2)",
               outline: "0px",
               borderRadius: "9999px",
             },
-            scrollbarColor: "rgba(255,255,255,.1) rgba(0,0,0,0)",
+            scrollbarColor: "rgba(255,255,255,.2) rgba(0,0,0,0)",
             scrollbarGutter: "stable",
             scrollbarWidth: "thin",
           },