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

@@ -11,6 +11,7 @@ import {
 } from "../model.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useDocumentTitle } from "../hooks/useDocumentTitle.ts";
+import { useHeightTransition } from "../hooks/useHeightTransition.ts";
 import { PageShell } from "../components/PageShell.tsx";
 import {
   expectOk,
@@ -35,6 +36,7 @@ export function UserLogin() {
   const navigate = useNavigate();
   const { login } = useAuth();
   const [showReset, setShowReset] = useState(false);
+  const cardRef = useHeightTransition<HTMLDivElement>(showReset);
 
   const form = useApiForm<LoginValues>({
     defaultValues: { username: "", password: "" },
@@ -54,7 +56,7 @@ export function UserLogin() {
 
   return (
     <PageShell centered>
-      <div className="auth-card">
+      <div className="auth-card" ref={cardRef}>
         <h1 className="auth-card-title">
           <Trans>Log in</Trans>
         </h1>
@@ -115,7 +117,7 @@ function ResetRequestPanel() {
 
   if (sent) {
     return (
-      <div className="auth-reset-panel">
+      <div className="auth-reset-panel animate-in">
         <p className="auth-reset-sent">
           <Trans>
             If that address is registered you'll receive a reset link shortly.
@@ -126,7 +128,7 @@ function ResetRequestPanel() {
   }
 
   return (
-    <div className="auth-reset-panel">
+    <div className="auth-reset-panel animate-in">
       <FormProvider {...form}>
         <form onSubmit={onSubmit} className="form auth-reset-form">
           <FormError title={t`Request failed`} />