Bug Description
In the Edit Task modal (expanded mode), the button container at the bottom ("Open note", "Archive", "Save", "Cancel") can be cut off when the modal content is tall, making the buttons inaccessible.
Expected Behavior
The modal should constrain its height to fit within the viewport, with the content area scrolling if needed while keeping the buttons always visible.
Actual Behavior
The modal can extend beyond the viewport height, cutting off the bottom buttons.
Root Cause
The modal and its content containers don't have proper height constraints and flex layout to keep the button container pinned at the bottom within the viewport.
Suggested Fix
Apply max-height constraint to .modal-content and use flex layout to keep buttons visible:
/* Constrain the inner modal content */
.tasknotes-plugin.minimalist-task-modal.expanded .modal-content {
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Make the content area scrollable */
.tasknotes-plugin.minimalist-task-modal.expanded .minimalist-modal-container {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
/* Keep button container fixed at bottom */
.tasknotes-plugin.minimalist-task-modal .modal-button-container {
flex-shrink: 0;
padding: 12px 16px;
}
Environment
- TaskNotes version: 4.3.0
- Obsidian version: 1.x (desktop)
- OS: macOS
Related
This is separate from #1512 (Details panel text rendering vertically) but both involve modal layout CSS.
Bug Description
In the Edit Task modal (expanded mode), the button container at the bottom ("Open note", "Archive", "Save", "Cancel") can be cut off when the modal content is tall, making the buttons inaccessible.
Expected Behavior
The modal should constrain its height to fit within the viewport, with the content area scrolling if needed while keeping the buttons always visible.
Actual Behavior
The modal can extend beyond the viewport height, cutting off the bottom buttons.
Root Cause
The modal and its content containers don't have proper height constraints and flex layout to keep the button container pinned at the bottom within the viewport.
Suggested Fix
Apply max-height constraint to
.modal-contentand use flex layout to keep buttons visible:Environment
Related
This is separate from #1512 (Details panel text rendering vertically) but both involve modal layout CSS.