diff --git a/frontend/src/components/schedule/ScheduleLayoutShell.vue b/frontend/src/components/schedule/ScheduleLayoutShell.vue index b320c285..524d5b69 100644 --- a/frontend/src/components/schedule/ScheduleLayoutShell.vue +++ b/frontend/src/components/schedule/ScheduleLayoutShell.vue @@ -214,6 +214,9 @@ export default { min-height: 0; height: 100%; overflow: visible; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .schedule-static-chrome { @@ -279,6 +282,9 @@ export default { flex: 1 1 auto; min-height: 0; overflow: visible; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .schedule-sidebar { @@ -287,6 +293,9 @@ export default { min-height: 0; display: flex; flex-direction: column; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .schedule-sidebar-card { @@ -294,6 +303,9 @@ export default { flex-direction: column; height: 100%; min-height: 0; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .schedule-sidebar-scroll { @@ -303,6 +315,9 @@ export default { margin-top: 0.75rem; padding-right: 0.25rem; max-height: calc(100vh - 300px); + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .schedule-team-list { @@ -361,6 +376,8 @@ export default { display: flex; flex-direction: column; overflow: hidden; + max-width: 100%; + box-sizing: border-box; } .tab-navigation { @@ -371,11 +388,17 @@ export default { flex: 1 1 auto; min-height: 0; overflow: hidden; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .tab-panel { height: 100%; min-height: 0; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .tab-panel-scroll { @@ -384,15 +407,18 @@ export default { overflow-y: auto; overflow-x: auto; min-width: 0; + max-width: 100%; padding-right: 0.25rem; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; + box-sizing: border-box; } @media (max-width: 960px) { .schedule-layout { flex-direction: column; - overflow: visible; + overflow-x: hidden; + overflow-y: visible; } .schedule-sidebar { @@ -403,7 +429,8 @@ export default { .schedule-shell { min-height: auto; height: auto; - overflow: visible; + overflow-x: hidden; + overflow-y: visible; } .schedule-sidebar-card, @@ -432,10 +459,10 @@ export default { max-height: none; width: 100%; min-width: 0; - overflow-x: auto; + overflow-x: hidden; overflow-y: visible; -webkit-overflow-scrolling: touch; - touch-action: pan-x pan-y; + touch-action: pan-y; } } diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue index a7a6ed85..620a95f4 100644 --- a/frontend/src/views/ScheduleView.vue +++ b/frontend/src/views/ScheduleView.vue @@ -1006,6 +1006,11 @@ export default { this.applyLeagueMatchScope(); // Lade auch die Tabellendaten für diese Liga await this.loadLeagueTable(team.league.id); + await this.$nextTick(); + if (typeof window !== 'undefined' && window.innerWidth <= 960) { + const workspaceHeader = this.$refs.scheduleShell?.$el?.querySelector('.schedule-workspace-header'); + workspaceHeader?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } } catch (error) { this.showInfo(this.$t('messages.error'), this.$t('schedule.errorLoadingMatches'), '', 'error'); this.matches = []; @@ -2031,6 +2036,10 @@ li { gap: 16px; height: 100%; min-height: 0; + min-width: 0; + max-width: 100%; + overflow-x: hidden; + box-sizing: border-box; } .schedule-page-header { @@ -2083,6 +2092,9 @@ li { grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .schedule-sidebar { @@ -2354,6 +2366,11 @@ li { .schedule-layout { grid-template-columns: 1fr; } + + .league-match-scope-card { + position: static; + top: auto; + } } @media (max-width: 640px) {