From df423ab906c0fe214ae9fb60a076db29b9a31d5f Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Mon, 27 Apr 2026 20:45:50 -0400 Subject: [PATCH] fix(task-editor): prevent preview pane and work log from flex-shrinking MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .task-main is a flex column. Children default to flex-shrink: 1, so when body content is taller than the available column height, flex squeezes .preview-pane back to its min-height (200px) and the overflow renders visibly on top of subsequent siblings — making the TaskLogSection appear in the middle of the body content. Surfaced by viewing a task with an unusually long markdown body in preview mode. Pre-existed PR 1, just rarely hit. NoteEditorView uses the standard block-flow .editor-main and isn't affected. Co-Authored-By: Claude Opus 4.7 --- frontend/src/views/TaskEditorView.vue | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/TaskEditorView.vue b/frontend/src/views/TaskEditorView.vue index f7baeed..68b3b8a 100644 --- a/frontend/src/views/TaskEditorView.vue +++ b/frontend/src/views/TaskEditorView.vue @@ -737,12 +737,19 @@ useEditorGuards(dirty, save); border-bottom: 1px solid var(--color-border); } +/* .task-main is a flex column; without flex-shrink: 0, long body content + gets squeezed back to min-height and overflows visibly on top of siblings. */ +.body-editor-wrap, +.body-log { + flex-shrink: 0; +} + .body-editor-wrap { min-height: 200px; } -.body-log { - /* TaskLogSection already has its own border/bg */ +:deep(.preview-pane) { + flex-shrink: 0; } /* Right sidebar: metadata fields */