From b24a5108dba8bd2dbce1b1ed6224e84d04822ac7 Mon Sep 17 00:00:00 2001
From: Your name <oluwaborihamzat@gmail.com>
Date: Sat, 15 Jul 2023 14:15:25 +0100
Subject: [PATCH] fix: resolve todopane oveflow

---
 src/components/inc/widgets/TodoPane.tsx | 35 ++++++++++++++++---------
 src/styles/scrollbar.css                | 23 ++++++++++++++++
 2 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 src/styles/scrollbar.css

diff --git a/src/components/inc/widgets/TodoPane.tsx b/src/components/inc/widgets/TodoPane.tsx
index e909b01..5ae0a95 100644
--- a/src/components/inc/widgets/TodoPane.tsx
+++ b/src/components/inc/widgets/TodoPane.tsx
@@ -13,7 +13,8 @@ import * as React from "react";
 import DatePicker from "../DatePicker";
 import TodoItem, { Input } from "../TodoItem";
 import { shallow } from "zustand/shallow";
-
+import { ScrollArea } from "@components/inc";
+import "../../../styles/scrollbar.css";
 function TodoPane() {
   const [todos, toggleAll, clearCompleted] = useStore(
     (state) => [state.todos, state.toggleAll, state.clearCompleted],
@@ -27,7 +28,7 @@ function TodoPane() {
   });
 
   return (
-    <Box css={{ width: 330, spacey: "$1" }}>
+    <Flex fd="column" gap="1" css={{ width: 330, maxHeight: "80vh" }}>
       <Card
         nested
         as={Flex}
@@ -53,16 +54,26 @@ function TodoPane() {
           </Dropdown.Menu>
         </Dropdown>
       </Card>
-      <Flex fd="column" gap="1">
-        {orderedActiveTodos.map((todo) => (
-          <TodoItem key={todo.id.toString()} todo={todo} />
-        ))}
-        {completedTodos.map((todo) => (
-          <TodoItem key={todo.id.toString()} todo={todo} />
-        ))}
-        <AddTodo />
-      </Flex>
-    </Box>
+      <Box
+        css={{
+          flex: 1,
+          overflowY: "scroll",
+          scrollbarWidth: "thin",
+          scrollbarColor: "#6969dd #e0e0e0",
+        }}
+        className="custom-scroll-bar"
+      >
+        <Flex fd="column" gap="1">
+          {orderedActiveTodos.map((todo) => (
+            <TodoItem key={todo.id.toString()} todo={todo} />
+          ))}
+          {completedTodos.map((todo) => (
+            <TodoItem key={todo.id.toString()} todo={todo} />
+          ))}
+        </Flex>
+      </Box>
+      <AddTodo />
+    </Flex>
   );
 }
 
diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
new file mode 100644
index 0000000..8404ae5
--- /dev/null
+++ b/src/styles/scrollbar.css
@@ -0,0 +1,23 @@
+.custom-scroll-bar {
+  scrollbar-gutter: stable;
+  padding-right: 4px;
+}
+.custom-scroll-bar::-webkit-scrollbar {
+  width: 7px;
+}
+
+.custom-scroll-bar::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 100px;
+}
+
+.custom-scroll-bar:hover::-webkit-scrollbar-track {
+  background-color: rgba(var(--colors-bgRGB), 0.4);
+}
+.custom-scroll-bar::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 100px;
+}
+.custom-scroll-bar:hover::-webkit-scrollbar-thumb {
+  background-color: var(--colors-text);
+}