From 6eb3ab38fbeaf8d5fca85fe2a7c66dd1e8a2cb03 Mon Sep 17 00:00:00 2001
From: jubnl <jgunther021@gmail.com>
Date: Thu, 16 Apr 2026 16:42:36 +0200
Subject: [PATCH 1/2] fix(ui): hide scrollbars on mobile, keep styled bars on
 desktop

Scrollbars on mobile caused layout shift (content pushed left).
Hidden via media query on mobile; desktop retains thin styled scrollbars.
Also removes inline scrollbarWidth override in DayPlanSidebar that bypassed the CSS rule.
---
 client/src/components/Planner/DayPlanSidebar.tsx |  2 +-
 client/src/index.css                             | 15 ++++++---------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Planner/DayPlanSidebar.tsx b/client/src/components/Planner/DayPlanSidebar.tsx
index ca6abffb..f22c92fb 100644
--- a/client/src/components/Planner/DayPlanSidebar.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.tsx
@@ -1023,7 +1023,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
       </div>
 
       {/* Tagesliste */}
-      <div className="scroll-container" style={{ flex: 1, overflowY: 'auto', minHeight: 0, scrollbarWidth: 'thin', scrollbarColor: 'var(--scrollbar-thumb) transparent' }}>
+      <div className="scroll-container" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
         {days.map((day, index) => {
           const isSelected = selectedDayId === day.id
           const isExpanded = expandedDays.has(day.id)
diff --git a/client/src/index.css b/client/src/index.css
index 4da5dac2..a4d5c519 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -323,7 +323,7 @@ body {
   display: none;
 }
 
-/* Scrollbalken */
+/* Scrollbars — styled on desktop, hidden on mobile */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -333,21 +333,23 @@ body {
   height: 0;
   width: 0;
 }
-
 ::-webkit-scrollbar-track {
   background: var(--scrollbar-track);
   border-radius: 3px;
 }
-
 ::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 3px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-hover);
 }
 
+@media (max-width: 767px) {
+  * { scrollbar-width: none; }
+  ::-webkit-scrollbar { width: 0; height: 0; }
+}
+
 .route-info-pill { background: none !important; border: none !important; box-shadow: none !important; width: auto !important; height: auto !important; margin: 0 !important; }
 .chat-scroll { overflow-y: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
 .chat-scroll::-webkit-scrollbar { width: 0; background: transparent; }
@@ -447,11 +449,6 @@ img[alt="TREK"] {
   color-scheme: dark;
 }
 
-/* Scroll-Container */
-.scroll-container {
-  scrollbar-width: thin;
-  scrollbar-color: #d1d5db #f1f5f9;
-}
 
 /* Toast-Animationen */
 @keyframes slideUp {

From 7945e752d6aded0fb4f174f21ff3111e7b940e7c Mon Sep 17 00:00:00 2001
From: jubnl <jgunther021@gmail.com>
Date: Thu, 16 Apr 2026 16:44:27 +0200
Subject: [PATCH 2/2] fix(ui): restore scrollbar-width: thin on
 .scroll-container

---
 client/src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/index.css b/client/src/index.css
index a4d5c519..e2e21e48 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -407,6 +407,7 @@ img[alt="TREK"] {
 }
 
 .scroll-container {
+  scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }