fix: resolve todopane oveflow

Dev-Motion · Jul 15, 2023 · b24a510 · b24a510
1 parent bc86e50
commit b24a510
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 12 deletions.
diff --git 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
@@ -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);
+}