From 7f44a2a401cf4718c65d66565101edc2cfb4a696 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E7=94=B7?= <l.weinan@gmail.com>
Date: Sat, 2 May 2026 16:35:54 +0800
Subject: [PATCH] fix: enable matrix landscape scrolling through time slots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/pages/clazz/components/ClazzMatrixView.vue | 6 +++++-
 src/pages/clazz/index.vue                      | 9 +++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/pages/clazz/components/ClazzMatrixView.vue b/src/pages/clazz/components/ClazzMatrixView.vue
index 4c84a5f..1dcb55e 100644
--- a/src/pages/clazz/components/ClazzMatrixView.vue
+++ b/src/pages/clazz/components/ClazzMatrixView.vue
@@ -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 {
diff --git a/src/pages/clazz/index.vue b/src/pages/clazz/index.vue
index a6a0ed6..1046686 100644
--- a/src/pages/clazz/index.vue
+++ b/src/pages/clazz/index.vue
@@ -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;