fix(docs/ask-widget): multi-line input that grows to 10 lines, then scrolls (#23311)

## Summary

Fixes the Aztec Docs AI assistant widget so long messages are visible
and editable while typing, instead of being clipped to a single line.

- Replaces the single-line `<input>` with a `<textarea>` that auto-grows
from 1 line up to **10 lines** as the user types or pastes.
- Past 10 lines, the textarea caps and `overflow-y: auto` engages so the
user can scroll their own message.
- Long unbroken strings (URLs, code) wrap at the edge (`overflow-wrap:
anywhere`).
- `min-width: 0` lets the textarea shrink inside its flex parent instead
of pinning to its content's intrinsic width.
- `box-sizing: border-box` keeps the auto-grow math in sync with the
11px vertical padding.
- Enter sends; Shift+Enter inserts a newline.

Same fix pattern as `honk-ai` PR
[#132](AztecProtocol/honk-ai#132) (the /ask
page).

## Test plan

- [x] JSX edit only — no API or build-script changes.
- [ ] Smoke in `yarn start` at the docs site:
  - Type a 1-line message → input stays 1 line
  - Type a 5-line message → input grows to 5 lines, no scrollbar
- Paste/type a 20-line message → input caps at 10 lines and shows a
vertical scrollbar
- Paste a single 500-char unbroken string → wraps at the right edge
instead of overflowing horizontally
  - Shift+Enter inserts a newline; Enter sends

---
*Created by
[claudebox](https://claudebox.work/v2/sessions/07156e2779ffc369) ·
group: `slackbot`*

Author: critesjosh

docs/src/components/AztecDocsWidget/Panel.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { AztecMark, Icons } from "./Icons";
 import Hero from "./Hero";
 import { UserBubble, AssistantBody } from "./Message";
@@ -58,6 +58,16 @@ export default function Panel({
         ? "Share failed"
         : "Share";
 
+  const taRef = useRef(null);
+  // Auto-grow the textarea to fit its content. The inline `max-height`
+  // caps it at 10 lines; past that the textarea scrolls instead.
+  useEffect(() => {
+    const ta = taRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = ta.scrollHeight + "px";
+  }, [input]);
+
   return (
     <div
       style={{
@@ -362,21 +372,36 @@ export default function Panel({
               border: `1px solid ${isInk ? "rgba(242,238,225,0.25)" : "var(--azw-ink-tint-1)"}`,
             }}
           >
-            <input
+            <textarea
+              ref={taRef}
               value={input}
               onChange={(e) => onInputChange(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  onSend();
+                }
+              }}
               placeholder="Ask about Aztec —"
               disabled={streaming}
+              rows={1}
               style={{
                 flex: 1,
+                minWidth: 0,
                 padding: "11px 12px",
                 background: "transparent",
                 border: "none",
                 outline: "none",
+                resize: "none",
                 color: panelFg,
                 fontFamily: "var(--azw-font-sans)",
                 fontSize: 13.5,
+                lineHeight: 1.5,
                 letterSpacing: "-0.01em",
+                boxSizing: "border-box",
+                maxHeight: "calc(10 * 1.5em + 22px)",
+                overflowY: "auto",
+                overflowWrap: "anywhere",
               }}
             />
             <button