Merge pull request #685 from mauriceboe/fix/hide-mobile-scrollbars

fix(ui): hide scrollbars on mobile, keep styled bars on desktop
fix(ui): restore scrollbar-width: thin on .scroll-container
2026-06-19 21:31:46 +00:00 · 2026-04-16 16:50:20 +02:00 · 2026-04-16 16:44:27 +02:00 · 2026-04-16 16:42:36 +02:00
2 changed files with 8 additions and 10 deletions
@@ -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)
@@ -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; }
@@ -405,6 +407,7 @@ img[alt="TREK"] {
 }

 .scroll-container {
+  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }

@@ -447,11 +450,6 @@ img[alt="TREK"] {
  color-scheme: dark;
 }

-/* Scroll-Container */
-.scroll-container {
-  scrollbar-width: thin;
-  scrollbar-color: #d1d5db #f1f5f9;
-}

 /* Toast-Animationen */
@keyframes slideUp {
Author	SHA1	Message	Date
Julien G.	272b32b410	Merge pull request #685 from mauriceboe/fix/hide-mobile-scrollbars fix(ui): hide scrollbars on mobile, keep styled bars on desktop	2026-04-16 16:50:20 +02:00
jubnl	7945e752d6	fix(ui): restore scrollbar-width: thin on .scroll-container	2026-04-16 16:44:27 +02:00
jubnl	6eb3ab38fb	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.	2026-04-16 16:42:36 +02:00