Wrap required profile form in a styled surface container for consistent UI with onboarding screens. Adjust layout and input widths in required form for better alignment and responsiveness.

web/components/required-profile-form.tsx

@@ -92,13 +92,13 @@ export const RequiredProfileUserForm = (props: {
       {/*    {t('profile.basics.subtitle', 'Write your own bio, your own way.')}*/}
       {/*  </div>*/}
       {/*)}*/}
-      <Col className={'gap-8 pb-[env(safe-area-inset-bottom)] w-fit'}>
+      <Col className={'gap-8 pb-[env(safe-area-inset-bottom)] w-full'}>
         {(step === 0 || profileCreatedAlready) && (
           <Col className={'gap-2'}>
             <label className={clsx(labelClassName)}>
               {t('profile.basics.display_name', 'Display name')}
             </label>
-            <Row className={'items-center gap-2'}>
+            <Row className={'items-center gap-2 w-full'}>
               <Input
                 disabled={false}
                 type="text"
@@ -131,7 +131,7 @@ export const RequiredProfileUserForm = (props: {
                 <label className={clsx(labelClassName)}>
                   {t('profile.basics.username', 'Username')}
                 </label>
-                <Row className={'items-center gap-2'}>
+                <Row className={'items-center gap-2 w-full'}>
                   <Input
                     disabled={loadingUsername}
                     type="text"
@@ -182,8 +182,13 @@ export const RequiredProfileUserForm = (props: {
         )}
 
         {onSubmit && (
-          <Row className={'justify-end'}>
+          <Row>
             <Button
+              // `cta` (bg-cta), not the default `gray-outline`: this is the one committed action on
+              // the screen, and it should read as such — same token StepProgress uses for "done".
+              color="cta"
+              size="xl"
+              className="w-full"
               disabled={isDisabled}
               loading={isSubmitting}
               onClick={async () => {

web/pages/signup.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import {LOCALE_TO_LANGUAGE} from 'common/choices'
 import {ProfileWithoutUser} from 'common/profiles/profile'
 import {BaseUser} from 'common/user'
@@ -14,6 +15,7 @@ import {OptionalProfileUserForm} from 'web/components/optional-profile-form'
 import {initialRequiredState, RequiredProfileUserForm} from 'web/components/required-profile-form'
 import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
 import {StepProgress} from 'web/components/widgets/step-progress'
+import {surface} from 'web/components/widgets/surface'
 import {useTracking} from 'web/hooks/use-tracking'
 import {api} from 'web/lib/api'
 import {auth, CACHED_REFERRAL_USERNAME_KEY} from 'web/lib/firebase/users'
@@ -154,11 +156,15 @@ export default function SignupPage() {
             className="mb-7"
           />
           {step === 0 ? (
-            <RequiredProfileUserForm
-              data={baseUser}
-              setData={setBaseUserState}
-              onSubmit={async () => advanceToStep(1)}
-            />
+            // Card + centered, matching the /onboarding screens that lead directly here — two short
+            // fields floating left in a wide column read as unfinished, not deliberate.
+            <div className={clsx(surface, 'mx-auto w-full max-w-md p-6 sm:p-10')}>
+              <RequiredProfileUserForm
+                data={baseUser}
+                setData={setBaseUserState}
+                onSubmit={async () => advanceToStep(1)}
+              />
+            </div>
           ) : step === 1 ? (
             <Col className={'w-full px-2 sm:px-6 py-4 mb-2 '}>
               <OptionalProfileUserForm