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/PlaylistDetail.tsx

@@ -28,6 +28,7 @@ import { playlistUrl } from "../utils/urls.ts";
 import { can } from "../utils/permissions.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useDocumentTitle } from "../hooks/useDocumentTitle.ts";
+import { useHeightTransition } from "../hooks/useHeightTransition.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
 import { DumpCard } from "../components/DumpCard.tsx";
@@ -105,6 +106,7 @@ export function PlaylistDetail() {
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
 
   const [editOpen, setEditOpen] = useState(false);
+  const headerRef = useHeightTransition<HTMLDivElement>(editOpen);
   const [confirmDelete, setConfirmDelete] = useState(false);
 
   // Mirrors activeDumpIds for use in effects without adding it as a dep.
@@ -587,7 +589,7 @@ export function PlaylistDetail() {
 
   return (
     <PageShell>
-      <div className="playlist-detail-header">
+      <div className="playlist-detail-header" ref={headerRef}>
         <div className="playlist-detail-header-top">
           {editOpen
             ? (
@@ -842,6 +844,7 @@ function PlaylistEditForm(
                   : null)}
               alt="Cover"
               size={72}
+              className="animate-in"
               onChange={(file) => {
                 field.onChange(file);
                 setImagePreview(URL.createObjectURL(file));
@@ -850,7 +853,7 @@ function PlaylistEditForm(
           )}
         />
 
-        <div className="playlist-detail-content playlist-edit-content">
+        <div className="playlist-detail-content playlist-edit-content animate-in">
           <Controller
             name="title"
             control={form.control}