Create flow UX updates

app/create/text/page.tsx

@@ -1,21 +1,24 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useMediaQuery } from "../../hooks/useMediaQuery";
-import HeaderLockup from "../../components/type/HeaderLockup";
 import TextInput from "../../components/controls/TextInput";
+import { useTranslation } from "../../contexts/MessagesContext";
 import { useCreateFlow } from "../context/CreateFlowContext";
+import { useCreateFlowMdUp } from "../hooks/useCreateFlowMdUp";
+import { CreateFlowHeaderLockup } from "../components/CreateFlowHeaderLockup";
+import { CreateFlowStepShell } from "../components/CreateFlowStepShell";
 
 /**
  * Text page for the create flow
  *
  * Displays a text input field for user input using HeaderLockup and TextInput components.
- * Responsive sizing: uses L/M for HeaderLockup and medium/small for TextInput based on 640px breakpoint.
+ * Lockup sizing via `CreateFlowHeaderLockup`. TextInput: small / medium by breakpoint.
+ * Below `md`, this step stays vertically centered in the main area (see `CreateFlowLayoutClient`).
  */
 export default function TextPage() {
   const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
-  const [isMounted, setIsMounted] = useState(false);
-  const isMdOrLarger = useMediaQuery("(min-width: 640px)");
+  const mdUp = useCreateFlowMdUp();
+  const t = useTranslation("create.text");
   const [value, setValue] = useState(() =>
     typeof state.title === "string" ? state.title : "",
   );
@@ -27,32 +30,23 @@ export default function TextPage() {
     setValue((prev) => (prev === "" ? incoming : prev));
   }, [state.title]);
 
-  // Avoid flash: only use breakpoint after mount so SSR and first paint use same layout (desktop).
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer layout breakpoint until after mount to prevent flash
-    setIsMounted(true);
-  }, []);
-
-  const effectiveMdOrLarger = !isMounted || isMdOrLarger;
-
   const maxLength = 48;
   const characterCount = value.length;
+  const hint = t("characterCountTemplate")
+    .replace("{current}", String(characterCount))
+    .replace("{max}", String(maxLength));
 
   return (
-    <div className="w-full flex flex-col items-center px-[var(--spacing-measures-spacing-500,20px)] md:px-[64px]">
-      <div className="flex flex-col gap-[18px] items-start w-full max-w-[640px]">
-        {/* HeaderLockup: Left justification, L size at 640px+, M size below 640px */}
-        <HeaderLockup
-          title="What is your community called?"
-          description="This will be the name of your community"
+    <CreateFlowStepShell variant="centeredNarrow">
+      <div className="flex w-full max-w-[640px] flex-col items-start gap-[18px]">
+        <CreateFlowHeaderLockup
+          title={t("title")}
+          description={t("description")}
           justification="left"
-          size={effectiveMdOrLarger ? "L" : "M"}
         />
-
-        {/* TextInput: medium size at 640px+, small size below 640px */}
         <div className="w-full">
           <TextInput
-            placeholder="Enter your community name"
+            placeholder={t("placeholder")}
             value={value}
             onChange={(e) => {
               const v = e.target.value;
@@ -60,13 +54,13 @@ export default function TextPage() {
               markCreateFlowInteraction();
               updateState({ title: v });
             }}
-            inputSize={effectiveMdOrLarger ? "medium" : "small"}
+            inputSize={mdUp ? "medium" : "small"}
             formHeader={false}
-            textHint={`${characterCount}/${maxLength}`}
+            textHint={hint}
             maxLength={maxLength}
           />
         </div>
       </div>
-    </div>
+    </CreateFlowStepShell>
   );
 }