fix(chat): resolve composer cursor dead-space and add multi-line scroll (#670)

* fix(chat): resolve composer cursor dead-space and add multi-line scroll

The chatbox input had a clickable dead zone: minHeight was applied to
the outer wrapper (52px) while the ProseMirror editable element inside
was content-height, so clicks in the lower area hit the wrapper instead
of the editor — no caret appeared until the cursor moved into the top
content region. The inner scroll div used h-full which doesn't resolve
against a min/maxHeight-only parent, so scrolling never engaged.

- Move min-height from the outer wrapper to the ProseMirror element via
  a --composer-min-h CSS variable (index.css), making the full area
  editable and clickable.
- ChatInputBar: start at 1 line (26px), cap at 3 lines (78px), then scroll.
- Add overscroll-contain to the scroll area to prevent scroll chaining.
- Remove redundant outer maxHeight (inner div already constrains).
- Merge adjacent @layer components blocks in index.css.

* style: split inline style prop to satisfy Biome 100-char width

* chore: trigger CI re-run

* chore: retrigger CI

Author: gnoviawan

src/renderer/components/chat/ChatInputBar.tsx

@@ -653,8 +653,8 @@ export function ChatInputBar({
                 editorRef={editorRef}
                 inputRef={composerInputRef}
                 disabled={disabled || sending}
-                minHeight={52}
-                maxHeight={160}
+                minHeight={26} /* 1 line: 16px × 1.625 */
+                maxHeight={78} /* 3 lines: 3 × 26px, then scroll */
                 placeholder={
                   disabled
                     ? 'Composer unavailable'

src/renderer/components/chat/composer/ChatComposerEditor.tsx

@@ -62,9 +62,12 @@ export interface ChatComposerEditorProps {
   placeholder?: string
   ariaLabel?: string
   autoFocus?: boolean
-  /** Min/max heights (CSS px). The editor grows with content up to `maxHeight`,
-   * then scrolls — replaces the old textarea `clampHeight`/`resetHeight`. */
+  /** Min height (CSS px) applied to the editable surface so the full area is
+   *  clickable — the ProseMirror element itself stretches to this height, so
+   *  clicks anywhere inside place the caret (no dead space below short text). */
   minHeight?: number
+  /** Max height (CSS px). The editor grows with content up to this height,
+   *  then the scroll area engages. */
   maxHeight?: number
   className?: string
   editorClassName?: string
@@ -201,7 +204,10 @@ export function ChatComposerEditor({
   placeholder,
   ariaLabel,
   autoFocus = false,
-  minHeight = 52,
+  // 26px = 1 line: text-base (16px) × leading-relaxed (1.625). Applied to the
+  // ProseMirror element via the `--composer-min-h` CSS var (index.css) so the
+  // full area is clickable — no dead space below short/empty text.
+  minHeight = 26,
   maxHeight = 160,
   className,
   editorClassName
@@ -456,11 +462,16 @@ export function ChatComposerEditor({
   }, [editor, disabled])
 
   return (
-    <div
-      className={cn('relative w-full overflow-hidden', disabled && 'opacity-60', className)}
-      style={{ minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px` }}
-    >
-      <div className="h-full w-full overflow-y-auto">
+    <div className={cn('relative w-full overflow-hidden', disabled && 'opacity-60', className)}>
+      <div
+        className="w-full overflow-y-auto overscroll-contain"
+        style={
+          {
+            maxHeight: `${maxHeight}px`,
+            '--composer-min-h': `${minHeight}px`
+          } as React.CSSProperties
+        }
+      >
         <EditorContent editor={editor} innerRef={editorContentRef} />
       </div>
     </div>

src/renderer/index.css

@@ -473,13 +473,22 @@
   }
 }
 
-/* Chat composer (Tiptap) empty-state placeholder.
+/* Chat composer (Tiptap) editable surface + empty-state placeholder.
    `@tiptap/extension-placeholder` sets `data-placeholder` + the `is-empty`
    class on the empty `<p>` node, but ships no CSS — the app must render the
    hint via `::before { content: attr(data-placeholder) }`. Applies to both
    the agent launcher and the existing-chat ChatInputBar (both share
-   ChatComposerEditor). */
+   ChatComposerEditor).
+
+   The min-height is applied to the ProseMirror element itself (not a wrapper)
+   via the `--composer-min-h` CSS variable set inline by ChatComposerEditor.
+   This makes the full area clickable — the caret appears wherever the user
+   clicks, eliminating the dead space below short/empty text that occurred
+   when min-height was on the outer wrapper. */
 @layer components {
+  [data-composer-editor="true"] {
+    min-height: var(--composer-min-h, auto);
+  }
   [data-composer-editor="true"] p.is-empty:first-child::before {
     content: attr(data-placeholder);
     color: hsl(var(--muted-foreground));