From be95ee2075085bdf6cb6d66507b723d9aaa8fddc Mon Sep 17 00:00:00 2001 From: lyon Date: Sat, 27 Jun 2026 01:13:23 +0800 Subject: [PATCH] fix(web): keep mdtodo task body visible in bounded panes --- .../src/views/projects/MdtodoView.vue | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/web/hwlab-cloud-web/src/views/projects/MdtodoView.vue b/web/hwlab-cloud-web/src/views/projects/MdtodoView.vue index 00a83fe3..07eec974 100644 --- a/web/hwlab-cloud-web/src/views/projects/MdtodoView.vue +++ b/web/hwlab-cloud-web/src/views/projects/MdtodoView.vue @@ -991,7 +991,8 @@ function displayDate(value?: string | null): string { .mdtodo-workspace { min-height: 0; height: 100%; } .mdtodo-task-panel, .mdtodo-detail-panel, -.mdtodo-error { display: grid; min-width: 0; min-height: 0; align-content: start; gap: 12px; padding: 12px; overflow: auto; } +.mdtodo-error { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: start; gap: 12px; padding: 12px; overflow: auto; } +.mdtodo-task-panel { grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; } .mdtodo-task-panel[data-collapsed="true"] { justify-items: center; padding: 8px 4px; overflow: hidden; } .mdtodo-detail-panel { height: 100%; align-content: stretch; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; } .mdtodo-panel-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; } @@ -999,7 +1000,7 @@ function displayDate(value?: string | null): string { .mdtodo-panel-header p { margin: 3px 0 0; color: #64706b; font-size: 12px; } .task-pane-actions { display: flex; gap: 6px; margin-left: auto; } .task-tools { display: grid; width: min(360px, 48%); grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.7fr); gap: 8px; } -.task-tree { display: grid; gap: 5px; } +.task-tree { display: grid; min-height: 0; gap: 5px; overflow: auto; } .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 #d8e2df; border-radius: 4px; background: #fff; color: #31423c; font-weight: 850; line-height: 1; } .task-toggle:disabled { border-color: transparent; background: transparent; } @@ -1018,7 +1019,7 @@ function displayDate(value?: string | null): string { .task-title-read:hover { background: #f4fbf8; } .detail-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .detail-toolbar select { min-width: 112px; height: 34px; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: #14211d; padding: 0 8px; font: inherit; } -.task-detail-content { display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: hidden; } +.task-detail-content { display: grid; min-width: 0; min-height: 0; align-content: start; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: auto; } .task-detail-list, .summary-list { display: grid; gap: 8px; margin: 0; } .task-detail-list div, @@ -1033,7 +1034,7 @@ function displayDate(value?: string | null): string { .inline-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; } .inline-editor input { width: 100%; min-width: 0; border: 1px solid #cbd8d4; border-radius: 6px; color: #14211d; font: inherit; padding: 8px 9px; } .status-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } -.task-editor { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 10px; border: 1px solid #d8e2df; border-radius: 8px; background: #fbfefd; padding: 12px; overflow: hidden; } +.task-editor { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto auto auto auto auto; gap: 10px; border: 1px solid #d8e2df; border-radius: 8px; background: #fbfefd; padding: 12px; overflow: visible; } .editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(132px, 0.32fr); gap: 10px; } .task-editor label { display: grid; min-width: 0; gap: 5px; color: #52615c; font-size: 12px; font-weight: 800; } .task-editor input, @@ -1044,6 +1045,7 @@ function displayDate(value?: string | null): string { .task-body-section, .report-link-section, .report-sidebar { display: grid; min-width: 0; min-height: 0; gap: 8px; } +.task-body-section { min-height: 150px; } .task-body-section header, .report-link-section header, .report-preview header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; color: #14211d; font-size: 13px; } @@ -1059,7 +1061,7 @@ function displayDate(value?: string | null): string { .markdown-body :deep(code) { border-radius: 4px; background: #eef6f2; padding: 1px 4px; color: #0f766e; } .markdown-body :deep(pre code) { background: transparent; color: inherit; padding: 0; white-space: inherit; } .markdown-body :deep(a) { color: #0f766e; font-weight: 750; } -.task-body-rendered { min-height: 0; overflow: auto; border: 1px solid #d8e2df; border-radius: 6px; background: #fff; padding: 12px; } +.task-body-rendered { min-height: 96px; max-height: min(360px, 45dvh); overflow: auto; border: 1px solid #d8e2df; border-radius: 6px; background: #fff; padding: 12px; } .empty-inline { margin: 0; color: #64706b; } .report-link-section { grid-template-rows: auto auto auto; border: 1px solid #d8e2df; border-radius: 8px; background: #fff; padding: 10px; overflow: auto; } .report-link-list { display: grid; gap: 6px; }