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

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 {
+    z-index: 1;
-      margin-top: 0;
+    position: relative;
-    }
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: base(0.8);
+    width: 100%;
+    max-width: base(36);
 
-    & > *:last-child {
+    & > * {
-      margin-bottom: 0;
-    }
-
-    .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`}>
+        <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,6 +75,7 @@ export const ResetPasswordClient: React.FC<Args> = ({ token }) => {
       method="POST"
       onSuccess={onSuccess}
     >
+      <div className={'inputWrap'}>
         <PasswordField
           field={{
             name: 'password',
@@ -90,6 +91,7 @@ export const ResetPasswordClient: React.FC<Args> = ({ 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 {
+  &__wrap {
-    margin-bottom: var(--base);
+    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;
+    }
   }
 }

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

@@ -1,11 +1,10 @@
 import type { AdminViewProps } from 'payload'
 
-import { Button, Translation } from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui'
-import { formatAdminURL } from '@payloadcms/ui/shared'
+import { formatAdminURL, Translation } from '@payloadcms/ui/shared'
 import LinkImport from 'next/link.js'
 import React from 'react'
 
-import { MinimalTemplate } from '../../templates/Minimal/index.js'
 import { ResetPasswordClient } from './index.client.js'
 import './index.scss'
 
@@ -37,7 +36,6 @@ export const ResetPassword: React.FC<AdminViewProps> = ({ initPageResult, params
 
   if (user) {
     return (
-      <MinimalTemplate className={resetPasswordBaseClass}>
       <div className={`${resetPasswordBaseClass}__wrap`}>
         <h1>{i18n.t('authentication:alreadyLoggedIn')}</h1>
         <p>
@@ -58,21 +56,17 @@ export const ResetPassword: React.FC<AdminViewProps> = ({ initPageResult, params
             t={i18n.t}
           />
         </p>
-          <br />
+        <Button buttonStyle="secondary" el="link" Link={Link} size="large" to={adminRoute}>
-          <Button buttonStyle="secondary" el="link" Link={Link} to={adminRoute}>
           {i18n.t('general:backToDashboard')}
         </Button>
       </div>
-      </MinimalTemplate>
     )
   }
 
   return (
-    <MinimalTemplate className={resetPasswordBaseClass}>
     <div className={`${resetPasswordBaseClass}__wrap`}>
       <h1>{i18n.t('authentication:resetPassword')}</h1>
       <ResetPasswordClient token={token} />
     </div>
-    </MinimalTemplate>
   )
 }

packages/next/src/views/Version/Restore/index.scss

@@ -38,24 +38,40 @@
     @include blur-bg;
     display: flex;
     align-items: center;
+    justify-content: center;
     height: 100%;
 
     &__toggle {
       @extend %btn-reset;
     }
+  }
+
+  &__wrapper {
+    z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
 
     .btn {
-      [dir='ltr'] & {
+      margin: 0;
-        margin-right: var(--base);
     }
-      [dir='rtl'] & {
-        margin-left: var(--base);
-      }
-    }
-  }
-
-  &__modal-template {
-    position: relative;
-    z-index: 1;
   }
 }

packages/next/src/views/Version/Restore/index.tsx

@@ -18,7 +18,6 @@ import { toast } from 'sonner'
 
 import type { Props } from './types.js'
 
-import { MinimalTemplate } from '../../../templates/Minimal/index.js'
 import './index.scss'
 
 const baseClass = 'restore-version'
@@ -123,12 +122,16 @@ const Restore: React.FC<Props> = ({
         )}
       </div>
       <Modal className={`${baseClass}__modal`} slug={modalSlug}>
-        <MinimalTemplate className={`${baseClass}__modal-template`}>
+        <div className={`${baseClass}__wrapper`}>
+          <div className={`${baseClass}__content`}>
             <h1>{t('version:confirmVersionRestoration')}</h1>
             <p>{restoreMessage}</p>
+          </div>
+          <div className={`${baseClass}__controls`}>
             <Button
               buttonStyle="secondary"
               onClick={processing ? undefined : () => toggleModal(modalSlug)}
+              size="large"
               type="button"
             >
               {t('general:cancel')}
@@ -136,7 +139,8 @@ const Restore: React.FC<Props> = ({
             <Button onClick={processing ? undefined : () => void handleRestore()}>
               {processing ? t('version:restoring') : t('general:confirm')}
             </Button>
-        </MinimalTemplate>
+          </div>
+        </div>
       </Modal>
     </Fragment>
   )

packages/ui/src/elements/DeleteDocument/index.scss

@@ -4,26 +4,39 @@
   @include blur-bg;
   display: flex;
   align-items: center;
-  height: 100%;
   justify-content: center;
-  padding: base(2);
+  height: 100%;
-
-  &__template {
-    z-index: 1;
-    position: relative;
-  }
 
   &__toggle {
     @extend %btn-reset;
   }
 
+  &__wrapper {
+    z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
     .btn {
       margin: 0;
     }
-
-  &__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $baseline;
   }
 }

packages/ui/src/elements/DeleteDocument/index.tsx

@@ -129,7 +129,8 @@ export const DeleteDocument: React.FC<Props> = (props) => {
           {t('general:delete')}
         </PopupList.Button>
         <Modal className={baseClass} slug={modalSlug}>
-          <div className={`${baseClass}__template`}>
+          <div className={`${baseClass}__wrapper`}>
+            <div className={`${baseClass}__content`}>
               <h1>{t('general:confirmDeletion')}</h1>
               <p>
                 <Translation
@@ -144,16 +145,22 @@ export const DeleteDocument: React.FC<Props> = (props) => {
                   }}
                 />
               </p>
-            <div className={`${baseClass}__actions`}>
+            </div>
+            <div className={`${baseClass}__controls`}>
               <Button
                 buttonStyle="secondary"
                 id="confirm-cancel"
                 onClick={deleting ? undefined : () => toggleModal(modalSlug)}
+                size="large"
                 type="button"
               >
                 {t('general:cancel')}
               </Button>
-              <Button id="confirm-delete" onClick={deleting ? undefined : handleDelete}>
+              <Button
+                id="confirm-delete"
+                onClick={deleting ? undefined : handleDelete}
+                size="large"
+              >
                 {deleting ? t('general:deleting') : t('general:confirm')}
               </Button>
             </div>

packages/ui/src/elements/DeleteMany/index.scss

@@ -4,16 +4,35 @@
   @include blur-bg;
   display: flex;
   align-items: center;
-  height: 100%;
   justify-content: center;
-  padding: base(2);
+  height: 100%;
 
-  &__template {
+  &__wrapper {
     z-index: 1;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
     .btn {
-    margin-right: $baseline;
+      margin: 0;
+    }
   }
 }

packages/ui/src/elements/DeleteMany/index.tsx

@@ -125,21 +125,26 @@ export const DeleteMany: React.FC<Props> = (props) => {
         {t('general:delete')}
       </Pill>
       <Modal className={baseClass} slug={modalSlug}>
-        <div className={`${baseClass}__template`}>
+        <div className={`${baseClass}__wrapper`}>
+          <div className={`${baseClass}__content`}>
             <h1>{t('general:confirmDeletion')}</h1>
             <p>{t('general:aboutToDeleteCount', { count, label: getTranslation(plural, i18n) })}</p>
+          </div>
+          <div className={`${baseClass}__controls`}>
             <Button
               buttonStyle="secondary"
               id="confirm-cancel"
               onClick={deleting ? undefined : () => toggleModal(modalSlug)}
+              size="large"
               type="button"
             >
               {t('general:cancel')}
             </Button>
-          <Button id="confirm-delete" onClick={deleting ? undefined : handleDelete}>
+            <Button id="confirm-delete" onClick={deleting ? undefined : handleDelete} size="large">
               {deleting ? t('general:deleting') : t('general:confirm')}
             </Button>
           </div>
+        </div>
       </Modal>
     </React.Fragment>
   )

packages/ui/src/elements/DuplicateDocument/index.scss

@@ -5,16 +5,36 @@
     @include blur-bg;
     display: flex;
     align-items: center;
+    justify-content: center;
     height: 100%;
-    padding: base(2);
-
-    .btn {
-      margin-right: $baseline;
-    }
   }
 
-  &__modal-template {
+  &__wrapper {
     z-index: 1;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
+    .btn {
+      margin: 0;
+    }
   }
 }

packages/ui/src/elements/DuplicateDocument/index.tsx

@@ -118,21 +118,26 @@ export const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel })
       </PopupList.Button>
       {modified && hasClicked && (
         <Modal className={`${baseClass}__modal`} slug={modalSlug}>
-          <div className={`${baseClass}__modal-template`}>
+          <div className={`${baseClass}__wrapper`}>
+            <div className={`${baseClass}__content`}>
               <h1>{t('general:confirmDuplication')}</h1>
               <p>{t('general:unsavedChangesDuplicate')}</p>
+            </div>
+            <div className={`${baseClass}__controls`}>
               <Button
                 buttonStyle="secondary"
                 id="confirm-cancel"
                 onClick={() => toggleModal(modalSlug)}
+                size="large"
                 type="button"
               >
                 {t('general:cancel')}
               </Button>
-            <Button id="confirm-duplicate" onClick={() => void confirm()}>
+              <Button id="confirm-duplicate" onClick={() => void confirm()} size="large">
                 {t('general:duplicateWithoutSaving')}
               </Button>
             </div>
+          </div>
         </Modal>
       )}
     </React.Fragment>

packages/ui/src/elements/GenerateConfirmation/index.scss

@@ -6,14 +6,33 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: base(2);
 
-  &__template {
+  &__wrapper {
-    position: relative;
     z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
     .btn {
-    margin-right: $baseline;
+      margin: 0;
+    }
   }
 }

packages/ui/src/elements/GenerateConfirmation/index.tsx

@@ -44,7 +44,8 @@ export const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props)
         {t('authentication:generateNewAPIKey')}
       </Button>
       <Modal className={baseClass} slug={modalSlug}>
-        <div className={`${baseClass}__template`}>
+        <div className={`${baseClass}__wrapper`}>
+          <div className={`${baseClass}__content`}>
             <h1>{t('authentication:confirmGeneration')}</h1>
             <p>
               <Translation
@@ -55,18 +56,21 @@ export const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props)
                 t={t}
               />
             </p>
-
+          </div>
+          <div className={`${baseClass}__controls`}>
             <Button
               buttonStyle="secondary"
               onClick={() => {
                 toggleModal(modalSlug)
               }}
+              size="large"
               type="button"
             >
               {t('general:cancel')}
             </Button>
             <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>
           </div>
+        </div>
       </Modal>
     </React.Fragment>
   )

packages/ui/src/elements/PublishMany/index.scss

@@ -4,15 +4,34 @@
   @include blur-bg;
   display: flex;
   align-items: center;
+  justify-content: center;
   height: 100%;
-  padding: base(2);
 
-  &__template {
+  &__wrapper {
     z-index: 1;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
     .btn {
-    margin-right: $baseline;
+      margin: 0;
+    }
   }
 }

packages/ui/src/elements/PublishMany/index.tsx

@@ -127,21 +127,30 @@ export const PublishMany: React.FC<PublishManyProps> = (props) => {
         {t('version:publish')}
       </Pill>
       <Modal className={baseClass} slug={modalSlug}>
-        <div className={`${baseClass}__template`}>
+        <div className={`${baseClass}__wrapper`}>
+          <div className={`${baseClass}__content`}>
             <h1>{t('version:confirmPublish')}</h1>
             <p>{t('version:aboutToPublishSelection', { label: getTranslation(plural, i18n) })}</p>
+          </div>
+          <div className={`${baseClass}__controls`}>
             <Button
               buttonStyle="secondary"
               id="confirm-cancel"
               onClick={submitted ? undefined : () => toggleModal(modalSlug)}
+              size="large"
               type="button"
             >
               {t('general:cancel')}
             </Button>
-          <Button id="confirm-publish" onClick={submitted ? undefined : handlePublish}>
+            <Button
+              id="confirm-publish"
+              onClick={submitted ? undefined : handlePublish}
+              size="large"
+            >
               {submitted ? t('version:publishing') : t('general:confirm')}
             </Button>
           </div>
+        </div>
       </Modal>
     </React.Fragment>
   )

packages/ui/src/elements/Status/index.scss

@@ -20,22 +20,41 @@
   &__modal {
     @include blur-bg;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     height: 100%;
-    padding: base(2);
 
     &__toggle {
       @extend %btn-reset;
     }
+  }
+
+  &__wrapper {
+    z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
 
     .btn {
-      margin-right: $baseline;
+      margin: 0;
     }
   }
-
-  &__modal-template {
-    position: relative;
-    z-index: 1;
-  }
 }

packages/ui/src/elements/Status/index.tsx

@@ -152,20 +152,28 @@ export const Status: React.FC = () => {
                 {t('version:unpublish')}
               </Button>
               <Modal className={`${baseClass}__modal`} slug={unPublishModalSlug}>
-                <div className={`${baseClass}__modal-template`}>
+                <div className={`${baseClass}__wrapper`}>
+                  <div className={`${baseClass}__content`}>
                     <h1>{t('version:confirmUnpublish')}</h1>
                     <p>{t('version:aboutToUnpublish')}</p>
+                  </div>
+                  <div className={`${baseClass}__controls`}>
                     <Button
                       buttonStyle="secondary"
                       onClick={processing ? undefined : () => toggleModal(unPublishModalSlug)}
+                      size="large"
                       type="button"
                     >
                       {t('general:cancel')}
                     </Button>
-                  <Button onClick={processing ? undefined : () => performAction('unpublish')}>
+                    <Button
+                      onClick={processing ? undefined : () => performAction('unpublish')}
+                      size="large"
+                    >
                       {t(processing ? 'version:unpublishing' : 'general:confirm')}
                     </Button>
                   </div>
+                </div>
               </Modal>
             </React.Fragment>
           )}
@@ -181,12 +189,16 @@ export const Status: React.FC = () => {
                 {t('version:revertToPublished')}
               </Button>
               <Modal className={`${baseClass}__modal`} slug={revertModalSlug}>
-                <div className={`${baseClass}__modal-template`}>
+                <div className={`${baseClass}__wrapper`}>
+                  <div className={`${baseClass}__content`}>
                     <h1>{t('version:confirmRevertToSaved')}</h1>
                     <p>{t('version:aboutToRevertToPublished')}</p>
+                  </div>
+                  <div className={`${baseClass}__controls`}>
                     <Button
                       buttonStyle="secondary"
                       onClick={processing ? undefined : () => toggleModal(revertModalSlug)}
+                      size="large"
                       type="button"
                     >
                       {t('general:cancel')}
@@ -194,10 +206,12 @@ export const Status: React.FC = () => {
                     <Button
                       id="action-revert-to-published-confirm"
                       onClick={processing ? undefined : () => performAction('revert')}
+                      size="large"
                     >
                       {t(processing ? 'version:reverting' : 'general:confirm')}
                     </Button>
                   </div>
+                </div>
               </Modal>
             </React.Fragment>
           )}

packages/ui/src/elements/Translation/index.tsx

@@ -1,4 +1,3 @@
-'use client'
 import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'
 
 import * as React from 'react'

packages/ui/src/elements/UnpublishMany/index.scss

@@ -4,15 +4,34 @@
   @include blur-bg;
   display: flex;
   align-items: center;
+  justify-content: center;
   height: 100%;
-  padding: base(2);
 
-  &__template {
+  &__wrapper {
     z-index: 1;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
     .btn {
-    margin-right: $baseline;
+      margin: 0;
+    }
   }
 }

packages/ui/src/elements/UnpublishMany/index.tsx

@@ -124,21 +124,30 @@ export const UnpublishMany: React.FC<UnpublishManyProps> = (props) => {
         {t('version:unpublish')}
       </Pill>
       <Modal className={baseClass} slug={modalSlug}>
-        <div className={`${baseClass}__template`}>
+        <div className={`${baseClass}__wrapper`}>
+          <div className={`${baseClass}__content`}>
             <h1>{t('version:confirmUnpublish')}</h1>
             <p>{t('version:aboutToUnpublishSelection', { label: getTranslation(plural, i18n) })}</p>
+          </div>
+          <div className={`${baseClass}__controls`}>
             <Button
               buttonStyle="secondary"
               id="confirm-cancel"
               onClick={submitted ? undefined : () => toggleModal(modalSlug)}
+              size="large"
               type="button"
             >
               {t('general:cancel')}
             </Button>
-          <Button id="confirm-unpublish" onClick={submitted ? undefined : handleUnpublish}>
+            <Button
+              id="confirm-unpublish"
+              onClick={submitted ? undefined : handleUnpublish}
+              size="large"
+            >
               {submitted ? t('version:unpublishing') : t('general:confirm')}
             </Button>
           </div>
+        </div>
       </Modal>
     </React.Fragment>
   )

packages/ui/src/exports/shared/index.ts

@@ -1,4 +1,5 @@
 // IMPORTANT: the shared.ts file CANNOT contain any Server Components _that import client components_.
+export { Translation } from '../../elements/Translation/index.js'
 export { withMergedProps } from '../../elements/withMergedProps/index.js' // cannot be within a 'use client', thus we export this from shared
 export { WithServerSideProps } from '../../elements/WithServerSideProps/index.js'
 export { PayloadIcon } from '../../graphics/Icon/index.js'

test/databaseAdapter.ts

@@ -1,10 +1,8 @@
+// DO NOT MODIFY. This file is automatically generated in initDevAndTest.ts
 
-  // DO NOT MODIFY. This file is automatically generated in initDevAndTest.ts
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
 
-  
+export const databaseAdapter = mongooseAdapter({
-  import { mongooseAdapter } from '@payloadcms/db-mongodb'
-
-  export const databaseAdapter = mongooseAdapter({
   url:
     process.env.MONGODB_MEMORY_SERVER_URI ||
     process.env.DATABASE_URI ||
@@ -12,5 +10,4 @@
   collation: {
     strength: 1,
   },
-  })
+})
-