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/pages/Dump.tsx

@@ -30,6 +30,7 @@ import { useAuth } from "../hooks/useAuth.ts";
 import { useCategories } from "../hooks/useCategories.ts";
 import { useDocumentTitle } from "../hooks/useDocumentTitle.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
+import { useHeightTransition } from "../hooks/useHeightTransition.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { Avatar } from "../components/Avatar.tsx";
 import RichContentCard from "../components/RichContentCard.tsx";
@@ -74,6 +75,7 @@ export function Dump() {
   const [collections, setCollections] = useState<Playlist[]>([]);
 
   const [titleEditing, setTitleEditing] = useState(false);
+  const headerRightRef = useHeightTransition<HTMLDivElement>(titleEditing);
   const [titleDraft, setTitleDraft] = useState("");
   const [titleSaving, setTitleSaving] = useState(false);
   const [titleError, setTitleError] = useState<string | null>(null);
@@ -364,10 +366,10 @@ export function Dump() {
                 </button>
               )}
             </div>
-            <div className="dump-header-right">
+            <div className="dump-header-right" ref={headerRightRef}>
               {titleEditing
                 ? (
-                  <div className="dump-title-editor">
+                  <div className="dump-title-editor animate-in">
                     <input
                       type="text"
                       className="dump-title-input"