minor UI tweaks

sitecompanion/popup.css

@@ -47,6 +47,8 @@ body {
   font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
   color: var(--ink);
   background: var(--page-bg);
+  --output-max-height-base: 280px;
+  --output-height-delta: 0px;
 }
 
 .title-block {
@@ -188,10 +190,6 @@ select {
   width: 100%;
 }
 
-body.custom-task-mode .output {
-  max-height: 210px;
-}
-
 .hidden {
   display: none !important;
 }
@@ -322,14 +320,14 @@ button:active {
   padding: 8px;
   background: var(--output-bg);
   min-height: 210px;
-  max-height: 280px;
+  max-height: calc(var(--output-max-height-base) - var(--output-height-delta));
   overflow: hidden;
 }
 
 .output-body {
   margin: 0;
   word-break: break-word;
-  max-height: 260px;
+  max-height: calc(var(--output-max-height-base) - var(--output-height-delta) - 20px);
   overflow-y: auto;
   font-size: 11px;
   line-height: 1.45;

sitecompanion/popup.html

@@ -78,7 +78,6 @@
           </div>
           <div class="task-row custom-task-row hidden" id="customTaskRow">
             <div class="field custom-task-field">
-              <label for="customTaskInput">Custom task</label>
               <textarea id="customTaskInput" rows="2" placeholder="Enter temporary custom task..."></textarea>
             </div>
             <div class="custom-task-actions">

sitecompanion/popup.js

@@ -715,7 +715,11 @@ function setCustomTaskMode(enabled, { persist = true } = {}) {
   state.customTaskMode = Boolean(enabled);
   document.body.classList.toggle("custom-task-mode", state.customTaskMode);
   if (state.customTaskMode) {
-    normalTaskRow?.classList.add("hidden");
+    if (normalTaskRow) {
+      const measured = measureRowHeight(normalTaskRow);
+      if (measured) normalTaskRowHeight = measured;
+      normalTaskRow.classList.add("hidden");
+    }
     customTaskRow?.classList.remove("hidden");
     if (taskActionsSlot && taskActions) {
       taskActionsSlot.appendChild(taskActions);
@@ -724,12 +728,28 @@ function setCustomTaskMode(enabled, { persist = true } = {}) {
       customTaskInput.value = state.customTaskText || "";
       customTaskInput.focus();
     }
+    window.requestAnimationFrame(() => {
+      if (customTaskRow) {
+        const measured = measureRowHeight(customTaskRow);
+        if (measured) customTaskRowHeight = measured;
+      }
+      updateOutputHeightDelta();
+    });
   } else {
     customTaskRow?.classList.add("hidden");
-    normalTaskRow?.classList.remove("hidden");
+    if (normalTaskRow) {
+      normalTaskRow.classList.remove("hidden");
+    }
     if (normalTaskRow && taskActions) {
       normalTaskRow.appendChild(taskActions);
     }
+    window.requestAnimationFrame(() => {
+      if (normalTaskRow) {
+        const measured = measureRowHeight(normalTaskRow);
+        if (measured) normalTaskRowHeight = measured;
+      }
+      updateOutputHeightDelta();
+    });
   }
   updatePromptCount();
   if (persist) {
@@ -811,6 +831,26 @@ function scheduleConfigRefresh() {
   }, 250);
 }
 
+let normalTaskRowHeight = null;
+let customTaskRowHeight = null;
+
+function measureRowHeight(row) {
+  if (!row) return 0;
+  return row.getBoundingClientRect().height || 0;
+}
+
+function updateOutputHeightDelta() {
+  const baseHeight = normalTaskRowHeight || measureRowHeight(normalTaskRow);
+  if (!baseHeight) return;
+  if (!state.customTaskMode) {
+    document.body.style.setProperty("--output-height-delta", "0px");
+    return;
+  }
+  const customHeight = customTaskRowHeight || measureRowHeight(customTaskRow);
+  const delta = Math.max(0, customHeight - baseHeight);
+  document.body.style.setProperty("--output-height-delta", `${Math.round(delta)}px`);
+}
+
 async function refreshSiteContentCounts() {
   if (state.isAnalyzing) return;
   if (state.currentPopupState !== "normal") return;