From 7c59e79a7a769baecc62763b00d94be8330e2a50 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Fri, 8 Aug 2025 19:50:50 +0200
Subject: [PATCH] improve scrollbars on chrome

---
 app/assets/css/main.css                       | 19 +++++++++++++++++++
 app/components/settings/GoogleLogin.vue       |  4 ++--
 app/components/todo/Todos.vue                 |  2 +-
 app/components/utils/Sheet.vue                |  4 ++--
 app/components/utils/input/CategorySelect.vue |  2 +-
 app/components/utils/input/TagSelect.vue      |  2 +-
 6 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 7e57511..d499a47 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -46,3 +46,22 @@
 body {
   @apply bg-background text-text pointer-events-auto!;
 }
+
+/* improve scrollbar on chrome... */
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/app/components/settings/GoogleLogin.vue b/app/components/settings/GoogleLogin.vue
index a611e99..8aa2f5a 100644
--- a/app/components/settings/GoogleLogin.vue
+++ b/app/components/settings/GoogleLogin.vue
@@ -52,7 +52,7 @@ function logout() {
 </script>
 
 <template>
-  <div v-if="!isLoggedIn" class="flex gap-1 overflow-scroll">
+  <div v-if="!isLoggedIn" class="flex gap-1">
     <div class="border-secondary flex h-8 items-center rounded border-1 px-1">
       <button
         class="flex cursor-pointer gap-1"
@@ -64,7 +64,7 @@ function logout() {
       </button>
     </div>
   </div>
-  <div v-if="isLoggedIn" class="flex gap-1 overflow-scroll">
+  <div v-if="isLoggedIn" class="flex gap-1">
     <div
       class="border-secondary flex h-8 items-center gap-1 rounded border-1 px-1"
     >
diff --git a/app/components/todo/Todos.vue b/app/components/todo/Todos.vue
index abcf728..acd6092 100644
--- a/app/components/todo/Todos.vue
+++ b/app/components/todo/Todos.vue
@@ -26,7 +26,7 @@ function dropHandler(event: DragEvent, uuid: UUID) {
 <template>
   <div class="flex justify-center" data-testid="todos-container">
     <div
-      class="max-h-[calc(100dvh-5.75rem)] w-dvw max-w-200 overflow-scroll px-1 md:max-h-[calc(100dvh-2.5rem)]"
+      class="max-h-[calc(100dvh-5.75rem)] w-dvw max-w-200 overflow-auto px-1 md:max-h-[calc(100dvh-2.5rem)]"
     >
       <TransitionGroup
         leave-to-class="max-h-0! opacity-0 scale-y-0"
diff --git a/app/components/utils/Sheet.vue b/app/components/utils/Sheet.vue
index 438cb24..f1cc021 100644
--- a/app/components/utils/Sheet.vue
+++ b/app/components/utils/Sheet.vue
@@ -35,7 +35,7 @@ const useModal = useMediaQuery("(min-width: 40rem)");
         <DrawerContent
           class="bg-surface fixed bottom-0 z-30 flex h-96 w-dvw flex-col gap-2 rounded-t-lg p-1 pt-2 drop-shadow-lg"
         >
-          <div class="h-full overflow-scroll">
+          <div class="h-full overflow-auto">
             <VisuallyHidden>
               <DrawerTitle>{{ title }}</DrawerTitle>
               <DrawerDescription>{{ title }}</DrawerDescription>
@@ -57,7 +57,7 @@ const useModal = useMediaQuery("(min-width: 40rem)");
           leave-to-class="opacity-0 scale-95"
         >
           <DialogContent
-            class="bg-surface fixed top-1/2 left-1/2 z-30 h-128 w-9/10 max-w-196 -translate-x-1/2 -translate-y-1/2 overflow-scroll rounded-lg p-1 drop-shadow-2xl duration-200"
+            class="bg-surface fixed top-1/2 left-1/2 z-30 h-128 w-9/10 max-w-196 -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-lg p-1 drop-shadow-2xl duration-200"
           >
             <VisuallyHidden>
               <DialogTitle>{{ title }}</DialogTitle>
diff --git a/app/components/utils/input/CategorySelect.vue b/app/components/utils/input/CategorySelect.vue
index 948cbf3..456ead6 100644
--- a/app/components/utils/input/CategorySelect.vue
+++ b/app/components/utils/input/CategorySelect.vue
@@ -23,7 +23,7 @@ function isSelected(category: LabelType): boolean {
 </script>
 
 <template>
-  <div class="overflow-scroll">
+  <div class="overflow-auto">
     <Label
       v-for="category in categoryStore.data"
       :key="category.uuid"
diff --git a/app/components/utils/input/TagSelect.vue b/app/components/utils/input/TagSelect.vue
index 8c72b73..2e3a93f 100644
--- a/app/components/utils/input/TagSelect.vue
+++ b/app/components/utils/input/TagSelect.vue
@@ -38,7 +38,7 @@ const tags = computed(() => {
 </script>
 
 <template>
-  <div class="overflow-scroll">
+  <div class="overflow-auto">
     <Label
       v-for="tag in tags"
       :key="tag.uuid"
-- 
2.51.2