fix(web): auth page padding (#15569)

web/src/lib/components/layouts/AuthPageLayout.svelte

@@ -19,10 +19,8 @@
       </VStack>
     </CardHeader>
 
-    <div class="pb-4">
+    <CardBody class="p-8">
-      <CardBody>
+      {@render children?.()}
-        {@render children?.()}
+    </CardBody>
-      </CardBody>
-    </div>
   </Card>
 </section>

web/src/routes/auth/change-password/+page.svelte

@@ -34,29 +34,25 @@
 </script>
 
 <AuthPageLayout title={data.meta.title}>
-  <div class="m-4">
+  <form onsubmit={onSubmit} method="post" class="flex flex-col gap-4">
-    <Alert color="primary" size="small">
+    <Alert color="primary" size="small" class="mb-2">
       <Stack gap={4}>
         <Text>{$t('hi_user', { values: { name: $user.name, email: $user.email } })}</Text>
         <Text>{$t('change_password_description')}</Text>
       </Stack>
     </Alert>
-  </div>
 
-  <form onsubmit={onSubmit} method="post" class="mx-4 mt-6">
+    <Field label={$t('new_password')} required>
-    <Stack gap={4} class="mt-4">
+      <PasswordInput bind:value={password} autocomplete="new-password" />
-      <Field label={$t('new_password')} required>
+    </Field>
-        <PasswordInput bind:value={password} autocomplete="new-password" />
-      </Field>
 
-      <Field label={$t('confirm_password')} required>
+    <Field label={$t('confirm_password')} required>
-        <PasswordInput bind:value={passwordConfirm} autocomplete="new-password" />
+      <PasswordInput bind:value={passwordConfirm} autocomplete="new-password" />
-        <HelperText color="danger">{errorMessage}</HelperText>
+      <HelperText color="danger">{errorMessage}</HelperText>
-      </Field>
+    </Field>
 
-      <div class="my-5 flex w-full">
+    <Button class="mt-2" type="submit" size="large" shape="round" fullWidth disabled={!valid}
-        <Button type="submit" size="large" shape="round" fullWidth disabled={!valid}>{$t('to_change_password')}</Button>
+      >{$t('to_change_password')}</Button
-      </div>
+    >
-    </Stack>
   </form>
 </AuthPageLayout>

web/src/routes/auth/login/+page.svelte

@@ -6,7 +6,7 @@
   import { oauth } from '$lib/utils';
   import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
   import { login } from '@immich/sdk';
-  import { Alert, Button, Field, Input, PasswordInput } from '@immich/ui';
+  import { Alert, Button, Field, Input, PasswordInput, Stack } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -101,43 +101,43 @@
 
 {#if $featureFlags.loaded}
   <AuthPageLayout title={data.meta.title}>
-    {#if $serverConfig.loginPageMessage}
+    <Stack gap={4}>
-      <Alert color="primary">
+      {#if $serverConfig.loginPageMessage}
-        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        <Alert color="primary" class="mb-6">
-        {@html $serverConfig.loginPageMessage}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-      </Alert>
+          {@html $serverConfig.loginPageMessage}
-    {/if}
+        </Alert>
-
-    {#if !oauthLoading && $featureFlags.passwordLogin}
-      <form {onsubmit} class="mt-5 flex flex-col gap-5 text-dark mx-4">
-        {#if errorMessage}
-          <Alert color="danger" title={errorMessage} closable />
-        {/if}
-
-        <Field label={$t('email')}>
-          <Input name="email" type="email" autocomplete="email" bind:value={email} />
-        </Field>
-
-        <Field label={$t('password')}>
-          <PasswordInput bind:value={password} autocomplete="current-password" />
-        </Field>
-
-        <Button type="submit" size="large" shape="round" fullWidth {loading} class="mt-6">{$t('to_login')}</Button>
-      </form>
-    {/if}
-
-    {#if $featureFlags.oauth}
-      {#if $featureFlags.passwordLogin}
-        <div class="inline-flex w-full items-center justify-center mt-4">
-          <hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
-          <span
-            class="absolute left-1/2 -translate-x-1/2 bg-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white"
-          >
-            {$t('or').toUpperCase()}
-          </span>
-        </div>
       {/if}
-      <div class="my-5 flex flex-col gap-5 mx-4">
+
+      {#if !oauthLoading && $featureFlags.passwordLogin}
+        <form {onsubmit} class="flex flex-col gap-4">
+          {#if errorMessage}
+            <Alert color="danger" title={errorMessage} closable />
+          {/if}
+
+          <Field label={$t('email')}>
+            <Input name="email" type="email" autocomplete="email" bind:value={email} />
+          </Field>
+
+          <Field label={$t('password')}>
+            <PasswordInput bind:value={password} autocomplete="current-password" />
+          </Field>
+
+          <Button type="submit" size="large" shape="round" fullWidth {loading} class="mt-6">{$t('to_login')}</Button>
+        </form>
+      {/if}
+
+      {#if $featureFlags.oauth}
+        {#if $featureFlags.passwordLogin}
+          <div class="inline-flex w-full items-center justify-center my-4">
+            <hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
+            <span
+              class="absolute left-1/2 -translate-x-1/2 bg-gray-50 px-3 font-medium text-gray-900 dark:bg-neutral-900 dark:text-white"
+            >
+              {$t('or').toUpperCase()}
+            </span>
+          </div>
+        {/if}
         {#if oauthError}
           <Alert color="danger" title={oauthError} closable />
         {/if}
@@ -152,11 +152,11 @@
         >
           {$serverConfig.oauthButtonText}
         </Button>
-      </div>
+      {/if}
-    {/if}
 
-    {#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
+      {#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
-      <Alert color="warning" title={$t('login_has_been_disabled')} />
+        <Alert color="warning" title={$t('login_has_been_disabled')} />
-    {/if}
+      {/if}
+    </Stack>
   </AuthPageLayout>
 {/if}

web/src/routes/auth/register/+page.svelte

@@ -47,13 +47,11 @@
 </script>
 
 <AuthPageLayout title={data.meta.title}>
-  <div class="mx-4 mt-4">
+  <form onsubmit={onSubmit} method="post" class="flex flex-col gap-4">
-    <Alert color="primary">
+    <Alert color="primary" class="mb-2">
       <Text>{$t('admin.registration_description')}</Text>
     </Alert>
-  </div>
 
-  <form onsubmit={onSubmit} method="post" class="mt-5 flex flex-col gap-5 text-dark p-4">
     <Field label={$t('admin_email')} required>
       <Input bind:value={email} type="email" autocomplete="email" />
     </Field>
@@ -74,8 +72,6 @@
       <Alert color="danger" title={errorMessage} size="medium" class="mt-4" />
     {/if}
 
-    <div class="my-5 flex w-full">
+    <Button class="mt-4" type="submit" size="giant" shape="round" fullWidth disabled={!valid}>{$t('sign_up')}</Button>
-      <Button type="submit" size="giant" shape="round" fullWidth disabled={!valid}>{$t('sign_up')}</Button>
-    </div>
   </form>
 </AuthPageLayout>