From 9d67dd1cab7aacf1f1bcb95f39b9838a550a5f5e Mon Sep 17 00:00:00 2001
From: lyon <liang6516@outlook.com>
Date: Sat, 27 Jun 2026 00:58:29 +0800
Subject: [PATCH] fix(web): keep mdtodo workspace bounded on narrow viewports

---
 .../src/components/layout/SplitWorkspaceLayout.vue    | 11 ++++++++---
 web/hwlab-cloud-web/src/views/projects/MdtodoView.vue |  8 ++++----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue b/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
index 9ccdb315..552ce3df 100644
--- a/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
+++ b/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
@@ -173,14 +173,19 @@ function clamp(value: number, min: number, max: number): number {
   user-select: none;
 }
 
-@media (max-width: 980px) {
+@media (max-width: 720px) {
   .split-workspace-layout {
     display: grid;
-    height: auto;
+    height: 100%;
     min-height: 0;
     grid-template-columns: 1fr !important;
+    grid-template-rows: minmax(96px, 28%) minmax(0, 1fr) minmax(120px, 34%);
     gap: 10px;
-    overflow: visible;
+    overflow: hidden;
+  }
+
+  .split-workspace-layout:not([data-right-open="true"]) {
+    grid-template-rows: minmax(96px, 30%) minmax(0, 1fr);
   }
 
   .split-workspace-resizer {
diff --git a/web/hwlab-cloud-web/src/views/projects/MdtodoView.vue b/web/hwlab-cloud-web/src/views/projects/MdtodoView.vue
index f925c01b..00a83fe3 100644
--- a/web/hwlab-cloud-web/src/views/projects/MdtodoView.vue
+++ b/web/hwlab-cloud-web/src/views/projects/MdtodoView.vue
@@ -1099,14 +1099,14 @@ function displayDate(value?: string | null): string {
 .source-form .source-error { grid-column: 1 / -1; }
 @media (max-width: 980px) {
   .mdtodo-toolbar,
-  .mdtodo-workspace { grid-template-columns: 1fr; }
+  .mdtodo-workspace { min-width: 0; }
   .toolbar-actions { justify-content: flex-start; }
   .task-tools { width: 100%; grid-template-columns: 1fr; }
-  .mdtodo-page { height: auto; max-height: none; overflow: visible; }
-  .mdtodo-workspace { min-height: 0; height: auto; }
+  .mdtodo-page { height: calc(100dvh - 68px); max-height: calc(100dvh - 68px); overflow: hidden; }
+  .mdtodo-workspace { min-height: 0; height: 100%; }
   .mdtodo-task-panel[data-collapsed="true"] { justify-items: stretch; }
   .task-detail-content { grid-template-columns: 1fr; }
-  .report-sidebar { min-height: 420px; }
+  .report-sidebar { min-height: 0; }
 }
 @media (max-width: 640px) {
   .source-form { grid-template-columns: 1fr; }