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:
2026-05-02 16:35:54 +08:00
parent 0910774a2f
commit 7f44a2a401
2 changed files with 14 additions and 1 deletions
@@ -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 {
+9
View File
@@ -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;