From 5ea2fa46a6714c54c2a40681c1dafe0660ba118e Mon Sep 17 00:00:00 2001
From: root <root@lyon.remote>
Date: Sat, 27 Jun 2026 05:43:09 +0000
Subject: [PATCH] fix(mdtodo): shrink workspace panes to content height

---
 .../layout/SplitWorkspaceLayout.vue           | 28 +++++++++++++++++++
 .../src/components/mdtodo/MdtodoPageShell.vue |  5 ++--
 .../components/mdtodo/MdtodoReportPanel.vue   |  8 ++++--
 .../src/components/mdtodo/MdtodoTaskPanel.vue | 14 ++++++----
 .../src/components/mdtodo/MdtodoTaskTree.vue  |  8 ++++--
 5 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue b/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
index 167ebca3..13debb12 100644
--- a/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
+++ b/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
@@ -187,6 +187,22 @@ function clamp(value: number, min: number, max: number): number {
   user-select: none;
 }
 
+.split-workspace-layout.mdtodo-workspace {
+  height: auto;
+  max-height: 100%;
+  align-items: start;
+  overflow: visible;
+}
+
+.split-workspace-layout.mdtodo-workspace .split-workspace-pane,
+.split-workspace-layout.mdtodo-workspace .split-workspace-main {
+  align-self: start;
+}
+
+.split-workspace-layout.mdtodo-workspace .split-workspace-resizer {
+  align-self: stretch;
+}
+
 @media (max-width: 720px) {
   .split-workspace-layout {
     display: grid;
@@ -205,5 +221,17 @@ function clamp(value: number, min: number, max: number): number {
   .split-workspace-resizer {
     display: none;
   }
+
+  .split-workspace-layout.mdtodo-workspace {
+    height: 100%;
+    max-height: none;
+    align-items: stretch;
+    overflow: hidden;
+  }
+
+  .split-workspace-layout.mdtodo-workspace .split-workspace-pane,
+  .split-workspace-layout.mdtodo-workspace .split-workspace-main {
+    align-self: stretch;
+  }
 }
 </style>
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
index c947f03c..09d6e01b 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
@@ -575,7 +575,7 @@ function setError(err: unknown): void {
 </template>
 
 <style scoped>
-.mdtodo-page { display: grid; height: calc(100dvh - 68px); max-height: calc(100dvh - 68px); min-width: 0; min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid #cad6dd; border-radius: 8px; background: #f7fafb; }
+.mdtodo-page { display: grid; max-height: calc(100dvh - 68px); min-width: 0; min-height: 0; align-content: start; grid-template-rows: auto auto auto auto; gap: 0; overflow: auto; border: 1px solid #cad6dd; border-radius: 8px; background: #f7fafb; }
 .mdtodo-framebar { display: flex; min-width: 0; min-height: 34px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d8e1e7; background: #f9fbfc; padding: 4px 10px; }
 .mdtodo-title-lockup { display: inline-flex; min-width: 0; align-items: baseline; gap: 8px; }
 .mdtodo-title-lockup span { color: #6b7a86; font-size: 10px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; }
@@ -587,11 +587,12 @@ function setError(err: unknown): void {
 .source-message, .source-error { margin: 0; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
 .source-message { border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; }
 .source-error { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; }
-.mdtodo-workspace { min-height: 0; height: 100%; }
+.mdtodo-workspace { min-height: 0; height: auto; max-height: 100%; align-self: start; }
 .mdtodo-error { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: start; gap: 12px; padding: 12px; overflow: auto; }
 @media (max-width: 720px) {
   .mdtodo-page { height: calc(100dvh - 68px); max-height: calc(100dvh - 68px); overflow: hidden; }
   .mdtodo-framebar { align-items: start; flex-direction: column; gap: 2px; height: auto; padding: 6px 10px; }
   .mdtodo-route-chip { width: 100%; justify-content: flex-start; }
+  .mdtodo-workspace { height: 100%; max-height: none; align-self: stretch; }
 }
 </style>
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue
index c4c94812..c99127a5 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue
@@ -51,13 +51,13 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.report-sidebar { display: grid; min-width: 0; min-height: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr); background: #f8fafb; overflow: hidden; }
+.report-sidebar { display: grid; min-width: 0; min-height: 0; height: auto; max-height: 100%; align-content: start; grid-template-rows: auto auto; background: #f8fafb; overflow: hidden; }
 .report-sidebar[data-collapsed="true"] { justify-items: center; padding: 8px 4px; grid-template-rows: auto; }
 .report-sidebar-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #d8e1e7; color: #111827; font-size: 13px; padding: 9px 10px; }
 .report-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .report-sidebar-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
 .report-preview { display: grid; min-height: 0; gap: 8px; overflow: hidden; padding: 10px; }
-.report-preview > .markdown-body { min-height: 0; overflow: auto; }
+.report-preview > .markdown-body { min-height: 0; max-height: min(52dvh, 580px); overflow: auto; }
 .report-loading { color: #64706b; font-size: 13px; padding: 12px; }
 .markdown-body { min-width: 0; color: #111827; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
 .markdown-body :deep(p), .markdown-body :deep(ul), .markdown-body :deep(ol), .markdown-body :deep(pre), .markdown-body :deep(blockquote) { margin: 0 0 8px; }
@@ -72,4 +72,8 @@ const emit = defineEmits<{
 .mdtodo-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .mdtodo-dialog h2 { margin: 0; font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .report-fullscreen-body { min-height: 0; height: 100%; overflow: auto; border: 1px solid #e2e8f0; border-radius: 6px; padding: 14px; }
+@media (max-width: 720px) {
+  .report-sidebar { height: 100%; align-content: stretch; grid-template-rows: auto minmax(0, 1fr); }
+  .report-preview > .markdown-body { max-height: none; }
+}
 </style>
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue
index 35640232..d028b31f 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue
@@ -124,7 +124,7 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.mdtodo-detail-panel { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; overflow: hidden; background: #fff; }
+.mdtodo-detail-panel { display: grid; min-width: 0; min-height: 0; height: auto; max-height: 100%; align-content: start; grid-template-rows: auto auto auto auto; gap: 0; overflow: hidden; background: #fff; }
 .mdtodo-detail-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e2e8ed; padding: 10px 12px; }
 .task-title-block { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
 .task-id-large { display: inline-flex; min-width: 46px; justify-content: center; border: 1px solid #9be3dc; border-radius: 6px; background: #e8faf6; color: #0f766e; padding: 5px 8px; font-size: 12px; font-weight: 850; }
@@ -135,10 +135,10 @@ const emit = defineEmits<{
 .detail-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
 .detail-toolbar select { min-width: 108px; height: 32px; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; padding: 0 8px; font: inherit; font-size: 13px; }
 .task-status-stack { display: grid; min-width: 0; gap: 6px; }
-.task-detail-content { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 0; overflow: hidden; }
+.task-detail-content { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto auto; gap: 0; overflow: hidden; }
 .task-detail-status { display: grid; min-width: 0; gap: 6px; }
 .task-body-section { display: grid; min-width: 0; min-height: 0; }
-.task-body-rendered { min-height: 0; height: 100%; overflow: auto; border: 0; background: #fff; padding: 16px 18px 20px; }
+.task-body-rendered { min-height: 0; height: auto; max-height: min(48dvh, 560px); overflow: auto; border: 0; background: #fff; padding: 16px 18px 20px; }
 .markdown-body { min-width: 0; color: #111827; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
 .markdown-body :deep(p), .markdown-body :deep(ul), .markdown-body :deep(ol), .markdown-body :deep(pre), .markdown-body :deep(blockquote) { margin: 0 0 10px; }
 .markdown-body :deep(pre) { max-width: 100%; overflow: auto; border: 1px solid #d8e2df; border-radius: 6px; background: #f8faf9; color: #111827; padding: 10px; white-space: pre; }
@@ -146,8 +146,8 @@ const emit = defineEmits<{
 .markdown-body :deep(pre code) { background: transparent; color: inherit; padding: 0; white-space: inherit; }
 .markdown-body :deep(a) { color: #0f766e; font-weight: 750; }
 .empty-inline { margin: 0; color: #64706b; }
-.inline-body-editor { display: grid; min-height: 0; height: 100%; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
-.inline-body-editor textarea { width: 100%; min-width: 0; min-height: 0; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; font: inherit; line-height: 1.5; padding: 10px; resize: none; }
+.inline-body-editor { display: grid; min-height: 0; height: auto; grid-template-rows: minmax(180px, min(42dvh, 520px)) auto; gap: 8px; padding: 12px; }
+.inline-body-editor textarea { width: 100%; min-width: 0; min-height: 0; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; font: inherit; line-height: 1.5; padding: 10px; resize: vertical; }
 .task-document-footer { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; border-top: 1px solid #e2e8ed; background: #fbfcfd; padding: 9px 12px; }
 .report-link-section { display: grid; min-width: 0; min-height: 0; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
 .report-link-section > strong { color: #5d6a73; font-size: 11px; font-weight: 850; text-transform: uppercase; }
@@ -163,6 +163,10 @@ const emit = defineEmits<{
 .source-error { margin: 0; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
 .launch-blocker { margin: 0; border-bottom: 1px solid #e2e8ed; background: #fff7ed; color: #9a3412; padding: 7px 12px; font-size: 12px; }
 @media (max-width: 640px) {
+  .mdtodo-detail-panel { height: 100%; align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr) auto; }
+  .task-detail-content { grid-template-rows: auto minmax(0, 1fr); }
+  .task-body-rendered { height: 100%; max-height: none; }
+  .inline-body-editor { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
   .mdtodo-detail-header { flex-direction: column; align-items: stretch; }
   .detail-toolbar { justify-content: flex-start; }
   .task-title-block { grid-template-columns: 1fr; }
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue
index 5b795852..320430e3 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue
@@ -81,7 +81,7 @@ function toggleTask(task: MdtodoTaskRecord): void {
 </template>
 
 <style scoped>
-.mdtodo-task-panel { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; overflow: hidden; padding: 10px 8px 10px 10px; }
+.mdtodo-task-panel { display: grid; min-width: 0; min-height: 0; height: auto; max-height: 100%; align-content: start; grid-template-rows: auto auto auto; gap: 8px; overflow: hidden; padding: 10px 8px 10px 10px; }
 .mdtodo-task-panel[data-collapsed="true"] { justify-items: center; padding: 8px 4px; overflow: hidden; grid-template-rows: auto; }
 .mdtodo-panel-header { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
 .task-tree-title { min-width: 0; }
@@ -90,7 +90,7 @@ function toggleTask(task: MdtodoTaskRecord): void {
 .task-pane-actions { display: flex; gap: 6px; margin-left: auto; }
 .task-tools { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(96px, 0.55fr); gap: 6px; }
 .task-tools input, .task-tools select { width: 100%; min-width: 0; height: 30px; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; padding: 0 8px; font: inherit; font-size: 12px; }
-.task-tree { display: grid; min-height: 0; align-content: start; gap: 1px; overflow: auto; border-top: 1px solid #e3e9ee; padding-top: 2px; }
+.task-tree { display: grid; min-height: 0; max-height: min(54dvh, 560px); align-content: start; gap: 1px; overflow: auto; border-top: 1px solid #e3e9ee; padding-top: 2px; }
 .task-row-shell { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px; align-items: center; }
 .task-toggle { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #52616b; font-weight: 850; line-height: 1; }
 .task-toggle:hover:not(:disabled) { border-color: #cbd6dd; background: #fff; }
@@ -106,4 +106,8 @@ function toggleTask(task: MdtodoTaskRecord): void {
 .task-status[data-status="blocked"] { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
 .icon-button { display: inline-grid; width: 30px; height: 30px; place-items: center; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; font-weight: 850; }
 .icon-button:disabled { opacity: 0.5; }
+@media (max-width: 720px) {
+  .mdtodo-task-panel { height: 100%; align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr); }
+  .task-tree { max-height: none; }
+}
 </style>