diff --git a/index.html b/index.html
index 7fffccf..4458361 100644
--- a/index.html
+++ b/index.html
@@ -95,7 +95,6 @@
border-radius: var(--radius);
font-family: monospace;
resize: vertical;
- min-height: 150px;
}
input::placeholder,
@@ -1950,6 +1949,7 @@ chmod 755 kbtd
$('#card-detail-content-textarea').value = strippedContent;
updateCardDetailButtons();
+ resizeDetailTextarea();
}, () => {
cardDetailModalState = {
card: null,
@@ -2481,8 +2481,60 @@ chmod 755 kbtd
modalMousedownTarget = null;
});
+ function getTextareaLineHeight(textarea) {
+ const style = window.getComputedStyle(textarea);
+ return parseFloat(style.lineHeight) ||
+ parseFloat(style.fontSize) * 1.2;
+ }
+
+ function calcTextareaHeight(textarea, rows) {
+ const lineHeight = getTextareaLineHeight(textarea);
+ const style = window.getComputedStyle(textarea);
+ const padding = parseFloat(style.paddingTop) +
+ parseFloat(style.paddingBottom);
+ const border = parseFloat(style.borderTopWidth) +
+ parseFloat(style.borderBottomWidth);
+ return rows * lineHeight + padding + border;
+ }
+
+ function modalOverflows(textarea, modal, rows) {
+ textarea.style.height = calcTextareaHeight(textarea, rows) + 'px';
+ return modal.scrollHeight > modal.clientHeight;
+ }
+
+ function resizeDetailTextarea() {
+ const textarea = $('#card-detail-content-textarea');
+ const modal = textarea.closest('.modal-content');
+ const minRows = 8;
+ const lineCount = textarea.value.split('\n').length;
+ const desiredRows = Math.max(minRows, lineCount + 1);
+
+ if (!modalOverflows(textarea, modal, desiredRows)) return;
+
+ let lo = minRows;
+ let hi = desiredRows;
+ while (lo < hi) {
+ const mid = Math.ceil((lo + hi) / 2);
+ if (modalOverflows(textarea, modal, mid)) {
+ hi = mid - 1;
+ } else {
+ lo = mid;
+ }
+ }
+ textarea.style.height = calcTextareaHeight(textarea, lo) + 'px';
+ }
+
+ window.addEventListener('resize', () => {
+ if ($('#card-detail-modal').classList.contains('active')) {
+ resizeDetailTextarea();
+ }
+ });
+
$('#card-detail-title-input').addEventListener('input', updateCardDetailButtons);
- $('#card-detail-content-textarea').addEventListener('input', updateCardDetailButtons);
+ $('#card-detail-content-textarea').addEventListener('input', () => {
+ updateCardDetailButtons();
+ resizeDetailTextarea();
+ });
async function openRecentProject(projectName) {
console.log('Opening recent project:', projectName);