fix(ui, next): adjust modal alignment and padding (#7931)

## Description

Updates styling on modals and auth forms for more consistent spacing and
alignment.

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation

Author: tylandavis

packages/next/src/elements/LeaveWithoutSaving/index.scss

@@ -12,14 +12,14 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--base);
+    gap: base(0.8);
     padding: base(2);
   }
 
   &__content {
     display: flex;
     flex-direction: column;
-    gap: var(--base);
+    gap: base(0.4);
 
     > * {
       margin: 0;
@@ -28,7 +28,7 @@
 
   &__controls {
     display: flex;
-    gap: var(--base);
+    gap: base(0.4);
 
     .btn {
       margin: 0;

packages/next/src/templates/Minimal/index.scss

@@ -14,14 +14,14 @@
 
   &--width-normal {
     .template-minimal__wrap {
-      max-width: 500px;
+      max-width: base(24);
       width: 100%;
     }
   }
 
   &--width-wide {
     .template-minimal__wrap {
-      max-width: 1024px;
+      max-width: base(48);
       width: 100%;
     }
   }

packages/next/src/views/CreateFirstUser/index.scss

@@ -1,6 +1,16 @@
+@import '../../scss/styles.scss';
+
 .create-first-user {
+  display: flex;
+  flex-direction: column;
+  gap: base(0.4);
+
   > form > .field-type {
     margin-bottom: var(--base);
+
+    & .form-submit {
+      margin: 0;
+    }
   }
 }
 

packages/next/src/views/Logout/LogoutClient.tsx

@@ -4,6 +4,10 @@ import { formatAdminURL } from '@payloadcms/ui/shared'
 import LinkImport from 'next/link.js'
 import React, { Fragment, useEffect } from 'react'
 
+import './index.scss'
+
+const baseClass = 'logout'
+
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
 export const LogoutClient: React.FC<{
@@ -26,7 +30,7 @@ export const LogoutClient: React.FC<{
 
   if (isLoggingOut) {
     return (
-      <Fragment>
+      <div className={`${baseClass}__wrap`}>
         {inactivity && <h2>{t('authentication:loggedOutInactivity')}</h2>}
         {!inactivity && <h2>{t('authentication:loggedOutSuccessfully')}</h2>}
         <Button
@@ -43,7 +47,7 @@ export const LogoutClient: React.FC<{
         >
           {t('authentication:logBackIn')}
         </Button>
-      </Fragment>
+      </div>
     )
   }
 

packages/next/src/views/Logout/index.scss

@@ -1,19 +1,22 @@
+@import '../../scss/styles.scss';
+
 .logout {
   display: flex;
+  flex-direction: column;
   align-items: center;
   flex-wrap: wrap;
-  min-height: 100vh;
 
   &__wrap {
-    & > *:first-child {
-      margin-top: 0;
-    }
-
-    & > *:last-child {
-      margin-bottom: 0;
-    }
+    z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: base(0.8);
+    width: 100%;
+    max-width: base(36);
 
-    .btn {
+    & > * {
       margin: 0;
     }
   }

packages/next/src/views/Logout/index.tsx

@@ -25,7 +25,7 @@ export const LogoutView: React.FC<
   } = initPageResult
 
   return (
-    <div className={`${baseClass}__wrap`}>
+    <div className={`${baseClass}`}>
       <LogoutClient
         adminRoute={adminRoute}
         inactivity={inactivity}

packages/next/src/views/NotFound/index.client.tsx

@@ -38,8 +38,10 @@ export const NotFoundClient: React.FC<{
         .join(' ')}
     >
       <Gutter className={`${baseClass}__wrap`}>
-        <h1>{t('general:nothingFound')}</h1>
-        <p>{t('general:sorryNotFound')}</p>
+        <div className={`${baseClass}__content`}>
+          <h1>{t('general:nothingFound')}</h1>
+          <p>{t('general:sorryNotFound')}</p>
+        </div>
         <Button
           className={`${baseClass}__button`}
           el="link"

packages/next/src/views/NotFound/index.scss

@@ -13,6 +13,24 @@
     }
   }
 
+  &__wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: base(0.8);
+    max-width: base(36);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
   &__button {
     margin: 0;
   }

packages/next/src/views/ResetPassword/index.client.tsx

@@ -75,21 +75,23 @@ export const ResetPasswordClient: React.FC<Args> = ({ token }) => {
       method="POST"
       onSuccess={onSuccess}
     >
-      <PasswordField
-        field={{
-          name: 'password',
-          label: i18n.t('authentication:newPassword'),
-          required: true,
-        }}
-      />
-      <ConfirmPasswordField />
-      <HiddenField
-        field={{
-          name: 'token',
-        }}
-        forceUsePathFromProps
-        value={token}
-      />
+      <div className={'inputWrap'}>
+        <PasswordField
+          field={{
+            name: 'password',
+            label: i18n.t('authentication:newPassword'),
+            required: true,
+          }}
+        />
+        <ConfirmPasswordField />
+        <HiddenField
+          field={{
+            name: 'token',
+          }}
+          forceUsePathFromProps
+          value={token}
+        />
+      </div>
       <FormSubmit size="large">{i18n.t('authentication:resetPassword')}</FormSubmit>
     </Form>
   )

packages/next/src/views/ResetPassword/index.scss

@@ -1,5 +1,31 @@
+@import '../../scss/styles.scss';
+
 .reset-password {
-  form > .field-type {
-    margin-bottom: var(--base);
+  &__wrap {
+    z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: base(0.8);
+    max-width: base(36);
+
+    & > form {
+      width: 100%;
+
+      & > .inputWrap {
+        display: flex;
+        flex-direction: column;
+        gap: base(0.8);
+
+        > * {
+          margin: 0;
+        }
+      }
+    }
+
+    & > .btn {
+      margin: 0;
+    }
   }
 }