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

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

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

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

@@ -34,17 +34,14 @@
 </script>
 
 <AuthPageLayout title={data.meta.title}>
-  <div class="m-4">
-    <Alert color="primary" size="small">
+  <form onsubmit={onSubmit} method="post" class="flex flex-col gap-4">
+    <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">
-    <Stack gap={4} class="mt-4">
     <Field label={$t('new_password')} required>
       <PasswordInput bind:value={password} autocomplete="new-password" />
     </Field>
@@ -54,9 +51,8 @@
       <HelperText color="danger">{errorMessage}</HelperText>
     </Field>
 
-      <div class="my-5 flex w-full">
-        <Button type="submit" size="large" shape="round" fullWidth disabled={!valid}>{$t('to_change_password')}</Button>
-      </div>
-    </Stack>
+    <Button class="mt-2" type="submit" size="large" shape="round" fullWidth disabled={!valid}
+      >{$t('to_change_password')}</Button
+    >
   </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,15 +101,16 @@
 
 {#if $featureFlags.loaded}
   <AuthPageLayout title={data.meta.title}>
+    <Stack gap={4}>
       {#if $serverConfig.loginPageMessage}
-      <Alert color="primary">
+        <Alert color="primary" class="mb-6">
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {@html $serverConfig.loginPageMessage}
         </Alert>
       {/if}
 
       {#if !oauthLoading && $featureFlags.passwordLogin}
-      <form {onsubmit} class="mt-5 flex flex-col gap-5 text-dark mx-4">
+        <form {onsubmit} class="flex flex-col gap-4">
           {#if errorMessage}
             <Alert color="danger" title={errorMessage} closable />
           {/if}
@@ -128,7 +129,7 @@
 
       {#if $featureFlags.oauth}
         {#if $featureFlags.passwordLogin}
-        <div class="inline-flex w-full items-center justify-center mt-4">
+          <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"
@@ -137,7 +138,6 @@
             </span>
           </div>
         {/if}
-      <div class="my-5 flex flex-col gap-5 mx-4">
         {#if oauthError}
           <Alert color="danger" title={oauthError} closable />
         {/if}
@@ -152,11 +152,11 @@
         >
           {$serverConfig.oauthButtonText}
         </Button>
-      </div>
       {/if}
 
       {#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
         <Alert color="warning" title={$t('login_has_been_disabled')} />
       {/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">
-    <Alert color="primary">
+  <form onsubmit={onSubmit} method="post" class="flex flex-col gap-4">
+    <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 type="submit" size="giant" shape="round" fullWidth disabled={!valid}>{$t('sign_up')}</Button>
-    </div>
+    <Button class="mt-4" type="submit" size="giant" shape="round" fullWidth disabled={!valid}>{$t('sign_up')}</Button>
   </form>
 </AuthPageLayout>