Fix note entry dialog

This commit is contained in:
Ian Keane 2026-06-11 16:29:30 -04:00
parent 13042bcfa3
commit 55c8180693
3 changed files with 117 additions and 49 deletions

View file

@ -255,6 +255,9 @@ th.sort-desc .sort-indicator::after { content: '▼'; }
/* ── Modal ────────────────────────────────────────────────── */
dialog {
position: fixed;
inset: 0;
margin: auto;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
@ -356,7 +359,7 @@ fieldset.active .fs-body { display: contents; }
border-bottom: 1px solid var(--border);
}
.note-row:last-child { border-bottom: none; }
.note-text { flex: 1; font-size: .875rem; }
.note-text { flex: 1; font-size: .875rem; white-space: pre-wrap; word-break: break-word; }
.note-edit-controls { display: flex; gap: .25rem; }
.btn-edit-row { background: transparent; border: none; font-size: 1rem; padding: .2rem .3rem; }
@ -392,6 +395,43 @@ fieldset.active .fs-body { display: contents; }
#btn-save-tune { background: var(--accent); }
#btn-cancel { background: transparent; border: 1px solid var(--border); }
#notes-modal {
max-width: 700px;
height: 70vh;
max-height: 85vh;
}
#note-editor-modal {
max-width: 700px;
height: 90vh;
max-height: 95vh;
}
#note-editor-modal[open] {
display: flex;
flex-direction: column;
}
#note-editor-ta {
flex: 1;
min-height: 0;
display: block;
width: 100%;
resize: vertical;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--radius);
padding: .5rem .65rem;
font-size: .875rem;
font-family: var(--font);
line-height: 1.5;
margin-bottom: .5rem;
}
#note-editor-ta:focus {
outline: 2px solid var(--accent2);
outline-offset: -1px;
}
/* ── Detail modal ─────────────────────────────────────────── */
#detail-content h2 { margin-bottom: .75rem; }
#detail-content table { width: 100%; border-collapse: collapse; font-size: .85rem; }
@ -480,17 +520,17 @@ fieldset.active .fs-body { display: contents; }
}
.mob-actions { display: flex; gap: .2rem; flex-shrink: 0; }
/* Modals: fullscreen */
/* Modals: fullscreen — !important beats any ID-specific desktop size rules */
dialog {
position: fixed;
inset: 0;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
border: none;
margin: 0;
position: fixed !important;
inset: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
border-radius: 0 !important;
border: none !important;
margin: 0 !important;
}
}