/* ============================================================
Task modal — layout skeleton
The modal is a fixed-height flex column:
.task-modal-content (flex column, fixed height)
.modal-header
.modal-body ← must flex to fill, scroll internally
.task-body ← flex column filling the body
.task-form ← the top field row (fixed height)
.task-content-wrapper ← editor | tabs, fills remaining space
.modal-footer
Every link in that chain needs `flex:1; min-height:0` so the content
area fills the modal exactly instead of spilling past it.
============================================================ */
.task-modal-content > .modal-body {
padding: 0;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.task-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.task-content-wrapper {
display: grid;
grid-template-columns: 60% 40%;
gap: 1rem;
padding: 1rem;
flex: 1;
min-height: 0;
/* Visual separator between the form row above and the work area below. */
border-top: 1px solid var(--border-docs);
@media (max-width: 1300px) {
grid-template-columns: 1fr;
padding: 1rem 0 0;
}
}
/* The two columns each own their own scroll so the modal height stays put. */
.task-content-wrapper > * {
min-height: 0;
min-width: 0;
}
/* Right column (tabs + comments/audit/deps) gets a divider from the editor. */
.task-modal-tabs-col {
display: flex;
flex-direction: column;
overflow: hidden;
padding-left: 1rem;
border-left: 1px solid var(--border-docs);
}
@media (max-width: 1300px) {
.task-modal-tabs-col {
padding-left: 0;
border-left: none;
}
}
/* The tab strip stays fixed; the active panel fills the rest and scrolls. */
.task-modal-tabs-col > .modal-tabs {
flex: none;
}
.task-modal-tabs-col > .task-modal-comments,
.task-modal-tabs-col > .task-modal-deps-tab {
flex: 1;
min-height: 0;
}
/* In-modal the comment list flexes to the column height instead of the
standalone 400px cap used elsewhere. */
.task-modal-tabs-col .comment-modal-list {
max-height: none;
}
/* ── Editor pane ─────────────────────────────────────────────────────────── */
.task-modal-editor {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
overflow: auto;
border: 1px dashed var(--border-docs);
border-radius: 8px;
}
.task-modal-editor > .editor-kyst {
width: 100%;
height: 100%;
max-height: none;
align-self: stretch;
}
.task-modal-editor.hidden {
display: none;
}
/* ── Top field row ───────────────────────────────────────────────────────── */
.task-form {
padding: 18px 22px 16px;
flex: none;
}
/* Align all field cells to the top so labels/inputs line up across the row
regardless of each control's intrinsic height (multiselect vs date vs
native select). */
.task-modal-content .task-modal-grid-4 {
align-items: end;
}
.task-modal-content .task-modal-grid-4 > .form-group {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Give every control in the row the same height so the row reads as one
clean band. The multiselect trigger reuses .user-dash-filter-select, which
is shorter than .form-input — normalise it here. */
.task-modal-content .form-input,
.task-modal-content .status-picker-trigger,
.task-modal-content .tags .user-dash-filter-select {
min-height: 38px;
box-sizing: border-box;
}
.task-modal-content .tags .user-dash-filter-select {
padding: 9px 12px;
}
/* ── Title / header bits ─────────────────────────────────────────────────── */
.modal-create-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
margin-bottom: 4px;
}
/* Header title row: takes all the width left of the close/meatball actions
so the editable title input can stretch to fill it (an with
width:100% only grows as far as its flex parent allows). */
.task-modal-title-row {
display: flex;
gap: 1rem;
align-items: center;
flex: 1;
min-width: 0;
}
/* The slot that swaps between the