mirrors/pikasTech-HWLAB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mdtodo): shrink workspace panes to content height

Browse Source
This commit is contained in:
root
2026-06-27 05:43:09 +00:00
parent de58ad32be
commit 5ea2fa46a6
5 changed files with 52 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
+28
View File
@@ -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>
web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
+3 -2
View File
@@ -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>
web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue
+6 -2
View File
@@ -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>
web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue
+9 -5
View File
@@ -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; }
web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue
+6 -2
View File
@@ -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>