v3: inline edit forms and the narrow-viewport search row ease open instead of popping in

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/ChatModal.tsx

@@ -15,6 +15,7 @@ import { Markdown } from "./Markdown.tsx";
 import { Avatar } from "./Avatar.tsx";
 import { ConfirmModal } from "./ConfirmModal.tsx";
 import { Tooltip } from "./Tooltip.tsx";
+import { useHeightTransition } from "../hooks/useHeightTransition.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { can } from "../utils/permissions.ts";
@@ -68,6 +69,7 @@ function ChatMessageItem(
   }: ChatMessageItemProps,
 ) {
   const [editing, setEditing] = useState(false);
+  const bodyRef = useHeightTransition<HTMLDivElement>(editing);
   const [editDraft, setEditDraft] = useState(message.body);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const editorRef = useRef<TextEditorHandle>(null);
@@ -102,7 +104,7 @@ function ChatMessageItem(
         hasAvatar={!!message.authorAvatarMime}
         size={32}
       />
-      <div className="chat-message-body">
+      <div className="chat-message-body" ref={bodyRef}>
         {message.replyToId && (
           // Subtle one-line reference to the replied-to message; clicking jumps
           // to it. Falls back to a muted note when the target was deleted.
@@ -192,7 +194,7 @@ function ChatMessageItem(
 
         {editing
           ? (
-            <div className="chat-edit">
+            <div className="chat-edit animate-in">
               <TextEditor
                 ref={editorRef}
                 value={editDraft}