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.
This commit is contained in:
jubnl
2026-04-16 16:42:36 +02:00
parent c7a9210215
commit 6eb3ab38fb
2 changed files with 7 additions and 10 deletions
@@ -1023,7 +1023,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar({
</div> </div>
{/* Tagesliste */} {/* 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) => { {days.map((day, index) => {
const isSelected = selectedDayId === day.id const isSelected = selectedDayId === day.id
const isExpanded = expandedDays.has(day.id) const isExpanded = expandedDays.has(day.id)
+6 -9
View File
@@ -323,7 +323,7 @@ body {
display: none; display: none;
} }
/* Scrollbalken */ /* Scrollbars — styled on desktop, hidden on mobile */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
@@ -333,21 +333,23 @@ body {
height: 0; height: 0;
width: 0; width: 0;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--scrollbar-track); background: var(--scrollbar-track);
border-radius: 3px; border-radius: 3px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb); background: var(--scrollbar-thumb);
border-radius: 3px; border-radius: 3px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-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; } .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 { overflow-y: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chat-scroll::-webkit-scrollbar { width: 0; background: transparent; } .chat-scroll::-webkit-scrollbar { width: 0; background: transparent; }
@@ -447,11 +449,6 @@ img[alt="TREK"] {
color-scheme: dark; color-scheme: dark;
} }
/* Scroll-Container */
.scroll-container {
scrollbar-width: thin;
scrollbar-color: #d1d5db #f1f5f9;
}
/* Toast-Animationen */ /* Toast-Animationen */
@keyframes slideUp { @keyframes slideUp {