feat(ScheduleLayoutShell, ScheduleView): enhance layout and overflow handling
- Updated ScheduleLayoutShell.vue to improve overflow properties and ensure better layout management for tab panels and workspace components. - Enhanced ScheduleView.vue with max-width adjustments and touch-action properties for improved responsiveness and user interaction on mobile devices.
This commit is contained in:
@@ -382,7 +382,11 @@ export default {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
min-width: 0;
|
||||
padding-right: 0.25rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
@@ -404,15 +408,35 @@ export default {
|
||||
|
||||
.schedule-sidebar-card,
|
||||
.schedule-workspace,
|
||||
.tab-content,
|
||||
.tab-panel,
|
||||
.tab-panel-scroll,
|
||||
.schedule-sidebar-scroll {
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.tab-content,
|
||||
.tab-panel,
|
||||
.schedule-workspace {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-panel-scroll {
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
@@ -1734,9 +1734,11 @@ li {
|
||||
|
||||
.schedule-table-wrapper {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-x: contain;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
|
||||
#schedule-table {
|
||||
|
||||
Reference in New Issue
Block a user