fix: auto-expand inline comment textarea to fit content

- Add auto-resize effect that adjusts textarea height as user types
- Enable vertical resize handle (resize-vertical class)
- Add maxHeight prop (default 50vh) to prevent unbounded growth
- Apply maxHeight to preview pane for consistency

Fixes #11

Author: kylecarbs

src/browser/ui/markdown.tsx

@@ -740,6 +740,7 @@ interface MarkdownEditorProps {
   onKeyDown?: (e: React.KeyboardEvent) => void;
   placeholder?: string;
   minHeight?: string;
+  maxHeight?: string;
   autoFocus?: boolean;
   disabled?: boolean;
 }
@@ -770,6 +771,7 @@ export const MarkdownEditor = memo(function MarkdownEditor({
   onKeyDown,
   placeholder = "Leave a comment...",
   minHeight = "100px",
+  maxHeight = "50vh",
   autoFocus = false,
   disabled = false,
 }: MarkdownEditorProps) {
@@ -806,6 +808,17 @@ export const MarkdownEditor = memo(function MarkdownEditor({
     }
   }, [autoFocus]);
 
+  // Auto-resize textarea to fit content
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    // Reset height to auto to get the correct scrollHeight
+    textarea.style.height = "auto";
+    // Set height to scrollHeight to fit content
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value]);
+
   // Switch back to write mode when content is cleared externally (like after submit)
   const prevValueRef = useRef(value);
   useEffect(() => {
@@ -1370,11 +1383,11 @@ export const MarkdownEditor = memo(function MarkdownEditor({
               placeholder={placeholder}
               disabled={disabled}
               className={cn(
-                "w-full px-3 py-2 text-sm bg-transparent resize-none focus:outline-none",
+                "w-full px-3 py-2 text-sm bg-transparent resize-vertical focus:outline-none overflow-y-auto",
                 "placeholder:text-muted-foreground",
                 disabled && "opacity-50 cursor-not-allowed"
               )}
-              style={{ minHeight }}
+              style={{ minHeight, maxHeight }}
             />
           </div>
           <PopoverContent
@@ -1427,7 +1440,10 @@ export const MarkdownEditor = memo(function MarkdownEditor({
           </PopoverContent>
         </Popover>
       ) : (
-        <div className="px-3 py-2 overflow-auto" style={{ minHeight }}>
+        <div
+          className="px-3 py-2 overflow-auto"
+          style={{ minHeight, maxHeight }}
+        >
           {value.trim() ? (
             <Markdown className="text-sm">{value}</Markdown>
           ) : (