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

@@ -45,6 +45,7 @@ import { useDefaultFeedTab } from "../hooks/useDefaultFeedTab.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { useDumpListSync } from "../hooks/useDumpListSync.ts";
 import { useFading } from "../hooks/useFading.ts";
+import { useHeightTransition } from "../hooks/useHeightTransition.ts";
 import { usePlaylistListSync } from "../hooks/usePlaylistListSync.ts";
 import { usePositionAwareSync } from "../hooks/usePositionAwareSync.ts";
 import type { Playlist, RawPlaylist } from "../model.ts";
@@ -327,6 +328,8 @@ export function UserPublicProfile() {
 
   const [descEditing, setDescEditing] = useState(false);
   const [emailEditing, setEmailEditing] = useState(false);
+  const infoRef = useHeightTransition<HTMLDivElement>(emailEditing);
+  const descRef = useHeightTransition<HTMLDivElement>(descEditing);
   const prevMyVotesRef = useRef<Set<string> | null>(null);
 
   const [changePasswordOpen, setChangePasswordOpen] = useState(false);
@@ -786,7 +789,7 @@ export function UserPublicProfile() {
             </label>
           )}
         </div>
-        <div className="profile-info">
+        <div className="profile-info" ref={infoRef}>
           <div className="profile-info-scroll">
             <div className="profile-username-row">
               <h1 className="profile-username">{profileUser.username}</h1>
@@ -856,7 +859,7 @@ export function UserPublicProfile() {
       </div>
 
       {(profileUser.description || isOwnProfile) && (
-        <div className="profile-description">
+        <div className="profile-description" ref={descRef}>
           {descEditing
             ? (
               <DescriptionEditor
@@ -1646,7 +1649,7 @@ function EmailEditor({ initialEmail, onCancel, onSaved }: EmailEditorProps) {
 
   return (
     <FormProvider {...form}>
-      <form className="profile-email-editor" onSubmit={onSubmit}>
+      <form className="profile-email-editor animate-in" onSubmit={onSubmit}>
         <input
           type="email"
           className="profile-email-input"
@@ -1712,7 +1715,10 @@ function DescriptionEditor(
 
   return (
     <FormProvider {...form}>
-      <form className="profile-description-editor" onSubmit={onSubmit}>
+      <form
+        className="profile-description-editor animate-in"
+        onSubmit={onSubmit}
+      >
         <Controller
           name="description"
           control={form.control}