fix: view layout alignment (#220)

* added Container component

* Add changeset file to bump the package version

---------

Co-authored-by: Andrew Smith <a.smith@silentworks.co.uk>

Author: Hallidayo

.changeset/selfish-crews-tie.md

@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-react': patch
+---
+
+Fix view layout alignment

packages/react/src/components/Auth/Auth.tsx

@@ -168,14 +168,16 @@ function Auth({
       )
     case VIEWS.FORGOTTEN_PASSWORD:
       return (
-        <ForgottenPassword
-          appearance={appearance}
-          supabaseClient={supabaseClient}
-          setAuthView={setAuthView}
-          redirectTo={redirectTo}
-          showLinks={showLinks}
-          i18n={i18n}
-        />
+        <Container>
+          <ForgottenPassword
+            appearance={appearance}
+            supabaseClient={supabaseClient}
+            setAuthView={setAuthView}
+            redirectTo={redirectTo}
+            showLinks={showLinks}
+            i18n={i18n}
+          />
+        </Container>
       )
 
     case VIEWS.MAGIC_LINK:

packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx

@@ -48,49 +48,51 @@ function ForgottenPassword({
 
   return (
     <form id="auth-forgot-password" onSubmit={handlePasswordReset}>
-      <Container gap="large" direction="vertical" appearance={appearance}>
-        <div>
-          <Label htmlFor="email" appearance={appearance}>
-            {labels?.email_label}
-          </Label>
-          <Input
-            id="email"
-            name="email"
-            type="email"
-            autoFocus
-            placeholder={labels?.email_input_placeholder}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setEmail(e.target.value)
-            }
-            appearance={appearance}
-          />
-        </div>
-        <Button
-          type="submit"
-          color="primary"
-          loading={loading}
-          appearance={appearance}
-        >
-          {loading ? labels?.loading_button_label : labels?.button_label}
-        </Button>
-        {showLinks && (
-          <Anchor
-            href="#auth-sign-in"
-            onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-              e.preventDefault()
-              setAuthView(VIEWS.SIGN_IN)
-            }}
+      <Container direction="vertical" gap="large" appearance={appearance}>
+        <Container gap="large" direction="vertical" appearance={appearance}>
+          <div>
+            <Label htmlFor="email" appearance={appearance}>
+              {labels?.email_label}
+            </Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              autoFocus
+              placeholder={labels?.email_input_placeholder}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setEmail(e.target.value)
+              }
+              appearance={appearance}
+            />
+          </div>
+          <Button
+            type="submit"
+            color="primary"
+            loading={loading}
             appearance={appearance}
           >
-            {i18n?.sign_in?.link_text}
-          </Anchor>
-        )}
-        {message && <Message appearance={appearance}>{message}</Message>}
-        {error && (
-          <Message color="danger" appearance={appearance}>
-            {error}
-          </Message>
-        )}
+            {loading ? labels?.loading_button_label : labels?.button_label}
+          </Button>
+          {showLinks && (
+            <Anchor
+              href="#auth-sign-in"
+              onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                e.preventDefault()
+                setAuthView(VIEWS.SIGN_IN)
+              }}
+              appearance={appearance}
+            >
+              {i18n?.sign_in?.link_text}
+            </Anchor>
+          )}
+          {message && <Message appearance={appearance}>{message}</Message>}
+          {error && (
+            <Message color="danger" appearance={appearance}>
+              {error}
+            </Message>
+          )}
+        </Container>
       </Container>
     </form>
   )