From 959afd5a633cbe4ad5989c9762b9e0739dadacd5 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Tue, 2 Jun 2026 22:29:16 +0200
Subject: [PATCH] Make scrollbars wider and more visible on touch devices.

Global theme-aware scrollbar styling replaces the thin 6px event-table bar so long forms are easier to scroll on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/App.css   | 16 +-----------
 client/src/index.css | 59 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 9f26de4..d4d808d 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -2647,27 +2647,13 @@ html.scheme-dark .themed-select-option.is-selected {
 .events-scroll-container {
   width: 100%;
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   background: rgba(11, 12, 16, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 12px;
   box-sizing: border-box;
 }
 
-/* Custom Scrollbar for events container */
-.events-scroll-container::-webkit-scrollbar {
-  height: 6px;
-}
-.events-scroll-container::-webkit-scrollbar-track {
-  background: rgba(11, 12, 16, 0.2);
-}
-.events-scroll-container::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-.events-scroll-container::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
 .events-table {
   width: 100%;
   border-collapse: collapse;
diff --git a/client/src/index.css b/client/src/index.css
index 3896cc7..b0e36ea 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -18,3 +18,62 @@ body {
   flex-direction: column;
   align-items: center;
 }
+
+/* Scrollbars — auf Touch-Geräten breiter und besser sichtbar */
+:root {
+  --app-scrollbar-size: 10px;
+}
+
+@media (hover: none), (pointer: coarse), (max-width: 768px) {
+  :root {
+    --app-scrollbar-size: 14px;
+  }
+}
+
+html {
+  scrollbar-width: auto;
+  scrollbar-color: var(--app-accent-light) var(--app-surface-inset);
+  -webkit-overflow-scrolling: touch;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+*::-webkit-scrollbar {
+  width: var(--app-scrollbar-size);
+  height: var(--app-scrollbar-size);
+}
+
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track,
+*::-webkit-scrollbar-track {
+  background: var(--app-surface-inset);
+  border-radius: calc(var(--app-scrollbar-size) / 2);
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+*::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--app-accent-light) 55%, transparent);
+  border-radius: calc(var(--app-scrollbar-size) / 2);
+  min-height: 48px;
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--app-accent-light) 80%, transparent);
+}
+
+@media (hover: none), (pointer: coarse), (max-width: 768px) {
+  html::-webkit-scrollbar-thumb,
+  body::-webkit-scrollbar-thumb,
+  *::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--app-accent-light) 70%, transparent);
+  }
+
+  html::-webkit-scrollbar-thumb:active,
+  body::-webkit-scrollbar-thumb:active,
+  *::-webkit-scrollbar-thumb:active {
+    background: var(--app-accent-light);
+  }
+}