Auto-expand Note field up to 7 lines; floor manual resize at 1 line

src/renderer.html

@@ -103,7 +103,7 @@ <h2 class="signin-title">OneNote Web Clipper</h2>
 			<label class="field-label" id="title-label" for="title-field">Title</label>
 			<textarea id="title-field" rows="2" placeholder="Add a page title..."></textarea>
 			<label class="field-label" id="note-label" for="note-field">Note</label>
-			<textarea id="note-field" rows="2" placeholder="Add a note..."></textarea>
+			<textarea id="note-field" rows="1" placeholder="Add a note..."></textarea>
 			<label class="field-label" id="source-label">Source</label>
 			<div id="source-url" class="source-url" aria-labelledby="source-label"><svg class="source-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M9.49999 4H10.5C12.433 4 14 5.567 14 7.5C14 9.36856 12.5357 10.8951 10.6941 10.9948L10.5023 11L9.5023 11.0046C9.22616 11.0059 9.00127 10.783 8.99999 10.5069C8.99888 10.2614 9.17481 10.0565 9.40787 10.0131L9.4977 10.0046L10.5 10C11.8807 10 13 8.88071 13 7.5C13 6.17452 11.9685 5.08996 10.6644 5.00532L10.5 5H9.49999C9.22386 5 8.99999 4.77614 8.99999 4.5C8.99999 4.25454 9.17687 4.05039 9.41012 4.00806L9.49999 4ZM5.5 4H6.5C6.77614 4 7 4.22386 7 4.5C7 4.74546 6.82312 4.94961 6.58988 4.99194L6.5 5H5.5C4.11929 5 3 6.11929 3 7.5C3 8.82548 4.03154 9.91004 5.33562 9.99468L5.5 10H6.5C6.77614 10 7 10.2239 7 10.5C7 10.7455 6.82312 10.9496 6.58988 10.9919L6.5 11H5.5C3.567 11 2 9.433 2 7.5C2 5.63144 3.46428 4.10487 5.30796 4.00518L5.5 4ZM5.50023 7L10.5002 7.0023C10.7764 7.00242 11.0001 7.22638 11 7.50252C10.9999 7.74798 10.8229 7.95205 10.5897 7.99428L10.4998 8.0023L5.49977 8C5.22363 7.99987 4.99987 7.77591 5 7.49977C5.00011 7.25431 5.17708 7.05024 5.41035 7.00801L5.50023 7Z" fill="currentColor"/></svg><span id="source-url-text" dir="ltr"></span></div>
 		</div>

src/scripts/renderer.ts

@@ -366,6 +366,62 @@ document.querySelectorAll(".mode-btn").forEach((btn) => {
 });
 titleField.placeholder = strings.titlePlaceholder;
 noteField.placeholder = strings.notePlaceholder;
+
+// --- Note field auto-grow ------------------------------------------------
+// Grows the Note field with its content up to NOTE_MAX_LINES, then scrolls.
+// A manual drag-resize is remembered as a floor so typing can still grow the
+// field but never auto-shrinks it below the height the user chose.
+const NOTE_MAX_LINES = 7;
+let userPreferredNoteHeight = 0; // px; 0 = no manual preference yet
+let lastAutoNoteHeight = 0;
+
+// Derive the N-line cap from the field's live computed style so it stays correct
+// if the CSS line-height, padding, or border ever change (incl. theming).
+function getNoteMaxHeight() {
+	let cs = getComputedStyle(noteField);
+	let lineHeight = parseFloat(cs.lineHeight) || 20;
+	let verticalChrome = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom)
+		+ parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+	return NOTE_MAX_LINES * lineHeight + verticalChrome;
+}
+
+function autoGrowNoteField() {
+	noteField.style.height = "auto";
+	// (offsetHeight - clientHeight) is the exact vertical border to add back under
+	// border-box; it also tracks the focus border change.
+	let borderY = noteField.offsetHeight - noteField.clientHeight;
+	let contentHeight = noteField.scrollHeight + borderY;
+	let fitHeight = Math.min(contentHeight, getNoteMaxHeight());
+	let targetHeight = Math.max(fitHeight, userPreferredNoteHeight);
+	noteField.style.height = targetHeight + "px";
+	noteField.style.overflowY = contentHeight > targetHeight ? "auto" : "hidden";
+	lastAutoNoteHeight = noteField.offsetHeight;
+}
+
+function resetNoteFieldSize() {
+	userPreferredNoteHeight = 0;
+	autoGrowNoteField();
+}
+
+noteField.addEventListener("input", autoGrowNoteField);
+// Detect a drag-resize: it starts on the field and ends with a mouseup at a
+// height that no longer matches our last auto value. Record it as the floor (the
+// next keystroke grows past it as needed); the mousedown gate avoids stray clicks.
+// The floor is clamped to the auto-grow cap so a manual drag can never persist a
+// height taller than NOTE_MAX_LINES (which would otherwise stick across later
+// typing and suppress the scrollbar).
+let noteResizeInProgress = false;
+noteField.addEventListener("mousedown", () => { noteResizeInProgress = true; });
+document.addEventListener("mouseup", () => {
+	if (!noteResizeInProgress) { return; }
+	noteResizeInProgress = false;
+	if (Math.abs(noteField.offsetHeight - lastAutoNoteHeight) > 1) {
+		userPreferredNoteHeight = Math.min(noteField.offsetHeight, getNoteMaxHeight());
+		lastAutoNoteHeight = noteField.offsetHeight;
+		noteField.style.overflowY = "auto";
+	}
+});
+autoGrowNoteField();
 // Mode button tooltips (matches old modeButton.tsx tooltip pattern)
 let tooltipMap: any = {
 	fullpage: loc("WebClipper.ClipType.ScreenShot.Button.Tooltip", "Take a screenshot of the whole page, just like you see it."),
@@ -3313,6 +3369,7 @@ port.onMessage.addListener((message: any) => {
 		// Reset metadata fields
 		titleField.value = "";
 		noteField.value = "";
+		resetNoteFieldSize();
 		sourceUrlText.textContent = "";
 		sourceUrl.title = "";
 		// Clear stale capture content from DOM

src/styles/renderer.less

@@ -340,6 +340,12 @@ iframe#preview-frame {
 // Title is a single-line input per design
 #title-field { resize: none; }
 
+// Note field manual-resize bounds (auto-grow handled in renderer.ts). min-height
+// floors a drag at one line; max-height stops the native resize handle from
+// dragging past the 7-line cap (mirrors NOTE_MAX_LINES in renderer.ts).
+// One line = 20px line-height + 8px padding + 2px border = 30px; 7 lines = 150px.
+#note-field { min-height: 30px; max-height: 150px; }
+
 .source-url {
 	font-size: 14px; line-height: 20px;
 	color: @colorNeutralForeground3;