Skip to content

[Bug]: Edit Task modal buttons cut off at bottom (height overflow) #1532

@willfanguy

Description

@willfanguy

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions