From 4d271a11ec326c94074e633c7e6f3206058bb86a Mon Sep 17 00:00:00 2001
From: lemon <lemonknowsall@gmail.com>
Date: Fri, 12 Jun 2026 23:08:08 -0700
Subject: [PATCH] Match verifier bio and statement editors, narrow org steps

The org bio textarea now uses the same muted, borderless fill as the
'Your name' field on the identity step, starts at min-h-200, and
auto-grows as the user types. The verifier statement (Milkdown) editor
gets the same muted wrapper and a scoped 200px min-height so the two
steps match. The bio, statement, and how-to steps drop from max-w-3xl
to max-w-xl so the boxes and the tutorial's last step aren't oversized.
---
 src/components/OnboardingGate.tsx             |  9 ++++----
 src/components/onboarding/VerifierBioStep.tsx | 23 +++++++++++++++++--
 .../organizations/VerifierStatementEditor.tsx | 14 ++++++++---
 src/index.css                                 |  9 ++++++++
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/components/OnboardingGate.tsx b/src/components/OnboardingGate.tsx
index 83aae538..dec868cd 100644
--- a/src/components/OnboardingGate.tsx
+++ b/src/components/OnboardingGate.tsx
@@ -423,11 +423,12 @@ function CaptiveOverlay() {
           key={step}
           className={cn(
             'w-full mx-auto animate-in fade-in slide-in-from-bottom-2 duration-300',
-            // Bio, statement & how-to steps host a large text surface /
-            // markdown editor / two-column tutorial and need more room than
-            // the narrow base screens.
+            // Bio, statement & how-to steps host a text surface / markdown
+            // editor / tutorial and want a slightly roomier column than the
+            // narrow base screens — but not the full-width 3xl that left the
+            // text boxes and tutorial feeling oversized.
             step === 'orgBio' || step === 'orgStatement' || step === 'orgVerifyHowto'
-              ? 'max-w-3xl'
+              ? 'max-w-xl'
               : 'max-w-md',
           )}
         >
diff --git a/src/components/onboarding/VerifierBioStep.tsx b/src/components/onboarding/VerifierBioStep.tsx
index 12b7cc51..768e0fee 100644
--- a/src/components/onboarding/VerifierBioStep.tsx
+++ b/src/components/onboarding/VerifierBioStep.tsx
@@ -47,9 +47,28 @@ export function VerifierBioStep({
         <Textarea
           id="verifier-org-bio"
           value={draft.about}
-          onChange={(e) => onChange({ about: e.target.value })}
+          onChange={(e) => {
+            onChange({ about: e.target.value });
+            // Auto-grow: reset then size to content so the box expands
+            // downward as the user types instead of scrolling internally.
+            e.target.style.height = 'auto';
+            e.target.style.height = `${e.target.scrollHeight}px`;
+          }}
+          onFocus={(e) => {
+            e.target.style.height = 'auto';
+            e.target.style.height = `${e.target.scrollHeight}px`;
+          }}
           placeholder={t('onboarding.verifier.bio.placeholder')}
-          className="min-h-[400px] resize-none p-3 text-lg leading-7 md:text-lg"
+          className={cn(
+            'min-h-[200px] w-full resize-none overflow-hidden p-3',
+            'text-lg leading-7 md:text-lg',
+            // Match the muted, borderless look of the "Your name" field on
+            // the previous identity step (ProfileCard's editable inputs).
+            'rounded-lg border-2 border-transparent bg-muted/40',
+            'hover:bg-muted/60 hover:border-border',
+            'focus-visible:bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-offset-0',
+            'placeholder:text-muted-foreground/40 transition-colors duration-150',
+          )}
           aria-required
         />
       </div>
diff --git a/src/components/organizations/VerifierStatementEditor.tsx b/src/components/organizations/VerifierStatementEditor.tsx
index 7f1572a5..801d43e9 100644
--- a/src/components/organizations/VerifierStatementEditor.tsx
+++ b/src/components/organizations/VerifierStatementEditor.tsx
@@ -62,10 +62,18 @@ export function VerifierStatementEditor({
 
   return (
     <div className={cn('space-y-4', className)}>
-      {/* Borderless WYSIWYG markdown editor — no surrounding card/box so it
-          blends into the step. */}
-      <div className="rounded-lg overflow-hidden focus-within:ring-1 focus-within:ring-ring">
+      {/* Muted, borderless WYSIWYG markdown editor that matches the "Tell us
+          about your organization" bio box on the previous step — same muted
+          fill, no border until focus, and the same min height. */}
+      <div
+        className={cn(
+          'rounded-lg border-2 border-transparent bg-muted/40 overflow-hidden transition-colors duration-150',
+          'hover:bg-muted/60 hover:border-border',
+          'focus-within:bg-transparent focus-within:border-primary',
+        )}
+      >
         <MilkdownEditor
+          className="verifier-statement-editor"
           value={value}
           onChange={onChange}
           placeholder={t('verifier.placeholder')}
diff --git a/src/index.css b/src/index.css
index 500375e0..0d5b9f87 100644
--- a/src/index.css
+++ b/src/index.css
@@ -690,6 +690,15 @@
   @apply min-h-[350px];
 }
 
+/* Verifier-statement instance: shorter, transparent fill so it matches the
+   muted bio textarea on the previous onboarding step. The muted background
+   and border live on the wrapper in VerifierStatementEditor, not here. */
+.milkdown-editor.verifier-statement-editor .editor,
+.milkdown-editor.verifier-statement-editor .ProseMirror,
+.milkdown-editor.verifier-statement-editor .milkdown-content .ProseMirror {
+  @apply min-h-[200px] bg-transparent;
+}
+
 /* Room navigation arrow nudge — subtle horizontal pulse */
 @keyframes room-arrow-nudge-left {
   0%, 100% { transform: translateX(0); }