fix: enable matrix landscape scrolling through time slots
- Override --clazz-landscape-body-height for matrix to subtract header height, eliminating white space when scrolling - Set overflow: visible on landscape-stage for matrix so ml-body content can overflow the stage - Add min-width: max-content on matrix container so content overflows in X direction → becomes vertical scroll after 90° rotation - ml-body disabled internal scrolling when inside rotated viewport Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -79,7 +79,7 @@
|
||||
<div class="day-date">{{ day.date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-body">
|
||||
<div class="ml-body" :class="{ 'ml-body--stage-scroll': hideLandscapeHeader }">
|
||||
<div v-for="slot in timeSlots" :key="slot.key" class="ml-row">
|
||||
<div class="ml-label">
|
||||
<div class="header-label">{{ slot.label }}</div>
|
||||
@@ -524,6 +524,10 @@ export default defineComponent({
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 0.08rem;
|
||||
|
||||
&--stage-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.ml-row {
|
||||
|
||||
@@ -1473,6 +1473,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
--clazz-landscape-body-height: calc(100dvh - var(--landscape-toolbar-height) - 0.7rem);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1489,6 +1490,14 @@ export default defineComponent({
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.landscape-stage-viewport--matrix .landscape-stage {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.landscape-stage-viewport--matrix :deep(.matrix-container--landscape) {
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.landscape-stage {
|
||||
width: var(--clazz-landscape-body-height);
|
||||
height: 100dvw;
|
||||
|
||||
Reference in New Issue
Block a user