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,52 @@ 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_LINE_HEIGHT = 20;     // px — must match line-height in renderer.less
+const NOTE_VERTICAL_CHROME = 10; // 8px padding (4+4) + 2px border (1+1)
+const NOTE_MAX_LINES = 7;
+const NOTE_MAX_HEIGHT = NOTE_MAX_LINES * NOTE_LINE_HEIGHT + NOTE_VERTICAL_CHROME;
+let userPreferredNoteHeight = 0; // px; 0 = no manual preference yet
+let lastAutoNoteHeight = 0;
+
+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, NOTE_MAX_HEIGHT);
+	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.
+let noteResizeInProgress = false;
+noteField.addEventListener("mousedown", () => { noteResizeInProgress = true; });
+document.addEventListener("mouseup", () => {
+	if (!noteResizeInProgress) { return; }
+	noteResizeInProgress = false;
+	if (Math.abs(noteField.offsetHeight - lastAutoNoteHeight) > 1) {
+		userPreferredNoteHeight = noteField.offsetHeight;
+		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 +3359,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,10 @@ iframe#preview-frame {
 // Title is a single-line input per design
 #title-field { resize: none; }
 
+// Floor manual drag-resize at one line (auto-grow handled in renderer.ts):
+// 20px line-height + 8px padding + 2px border = 30px.
+#note-field { min-height: 30px; }
+
 .source-url {
 	font-size: 14px; line-height: 20px;
 	color: @colorNeutralForeground3;