fix broken buttons

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;
-    }
+    z-index: 1;
+    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`}>
-        <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
           Link={Link}
           className={`${baseClass}__button`}

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;
+    }
   }
 }

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

@@ -1,11 +1,10 @@
 import type { AdminViewProps } from 'payload'
 
-import { Button, Translation } from '@payloadcms/ui'
-import { formatAdminURL } from '@payloadcms/ui/shared'
+import { Button } from '@payloadcms/ui'
+import { Translation, formatAdminURL } 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,42 +36,37 @@ 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>
-            <Translation
-              elements={{
-                '0': ({ children }) => (
-                  <Link
-                    href={formatAdminURL({
-                      adminRoute,
-                      path: accountRoute,
-                    })}
-                  >
-                    {children}
-                  </Link>
-                ),
-              }}
-              i18nKey="authentication:loggedInChangePassword"
-              t={i18n.t}
-            />
-          </p>
-          <br />
-          <Button Link={Link} buttonStyle="secondary" el="link" to={adminRoute}>
-            {i18n.t('general:backToDashboard')}
-          </Button>
-        </div>
-      </MinimalTemplate>
+      <div className={`${resetPasswordBaseClass}__wrap`}>
+        <h1>{i18n.t('authentication:alreadyLoggedIn')}</h1>
+        <p>
+          <Translation
+            elements={{
+              '0': ({ children }) => (
+                <Link
+                  href={formatAdminURL({
+                    adminRoute,
+                    path: accountRoute,
+                  })}
+                >
+                  {children}
+                </Link>
+              ),
+            }}
+            i18nKey="authentication:loggedInChangePassword"
+            t={i18n.t}
+          />
+        </p>
+        <Button Link={Link} buttonStyle="secondary" el="link" to={adminRoute}>
+          {i18n.t('general:backToDashboard')}
+        </Button>
+      </div>
     )
   }
 
   return (
-    <MinimalTemplate className={resetPasswordBaseClass}>
-      <div className={`${resetPasswordBaseClass}__wrap`}>
-        <h1>{i18n.t('authentication:resetPassword')}</h1>
-        <ResetPasswordClient token={token} />
-      </div>
-    </MinimalTemplate>
+    <div className={`${resetPasswordBaseClass}__wrap`}>
+      <h1>{i18n.t('authentication:resetPassword')}</h1>
+      <ResetPasswordClient token={token} />
+    </div>
   )
 }

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;
     }
+  }
 
-    .btn {
-      [dir='ltr'] & {
-        margin-right: var(--base);
-      }
-      [dir='rtl'] & {
-        margin-left: var(--base);
-      }
+  &__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;
     }
   }
 
-  &__modal-template {
-    position: relative;
-    z-index: 1;
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
+    .btn {
+      margin: 0;
+    }
   }
 }

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'
@@ -119,20 +118,25 @@ const Restore: React.FC<Props> = ({
         )}
       </div>
       <Modal className={`${baseClass}__modal`} slug={modalSlug}>
-        <MinimalTemplate className={`${baseClass}__modal-template`}>
-          <h1>{t('version:confirmVersionRestoration')}</h1>
-          <p>{restoreMessage}</p>
-          <Button
-            buttonStyle="secondary"
-            onClick={processing ? undefined : () => toggleModal(modalSlug)}
-            type="button"
-          >
-            {t('general:cancel')}
-          </Button>
-          <Button onClick={processing ? undefined : () => void handleRestore()}>
-            {processing ? t('version:restoring') : t('general:confirm')}
-          </Button>
-        </MinimalTemplate>
+        <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')}
+            </Button>
+            <Button onClick={processing ? undefined : () => void handleRestore()}>
+              {processing ? t('version:restoring') : t('general:confirm')}
+            </Button>
+          </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);
-
-  &__template {
-    z-index: 1;
-    position: relative;
-  }
+  height: 100%;
 
   &__toggle {
     @extend %btn-reset;
   }
 
-  .btn {
-    margin: 0;
+  &__wrapper {
+    z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
   }
 
-  &__actions {
+  &__content {
     display: flex;
-    flex-wrap: wrap;
-    gap: $baseline;
+    flex-direction: column;
+    gap: base(0.4);
+
+    > * {
+      margin: 0;
+    }
+  }
+
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
+    .btn {
+      margin: 0;
+    }
   }
 }

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

@@ -129,31 +129,37 @@ export const DeleteDocument: React.FC<Props> = (props) => {
           {t('general:delete')}
         </PopupList.Button>
         <Modal className={baseClass} slug={modalSlug}>
-          <div className={`${baseClass}__template`}>
-            <h1>{t('general:confirmDeletion')}</h1>
-            <p>
-              <Translation
-                elements={{
-                  '1': ({ children }) => <strong>{children}</strong>,
-                }}
-                i18nKey="general:aboutToDelete"
-                t={t}
-                variables={{
-                  label: getTranslation(singularLabel, i18n),
-                  title: titleToRender,
-                }}
-              />
-            </p>
-            <div className={`${baseClass}__actions`}>
+          <div className={`${baseClass}__wrapper`}>
+            <div className={`${baseClass}__content`}>
+              <h1>{t('general:confirmDeletion')}</h1>
+              <p>
+                <Translation
+                  elements={{
+                    '1': ({ children }) => <strong>{children}</strong>,
+                  }}
+                  i18nKey="general:aboutToDelete"
+                  t={t}
+                  variables={{
+                    label: getTranslation(singularLabel, i18n),
+                    title: titleToRender,
+                  }}
+                />
+              </p>
+            </div>
+            <div className={`${baseClass}__controls`}>
               <Button
                 buttonStyle="secondary"
                 id="confirm-cancel"
-                onClick={deleting ? undefined : () => toggleModal(modalSlug)}
+                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={() => void (deleting ? undefined : handleDelete())}
+              >
                 {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);
   }
 
-  .btn {
-    margin-right: $baseline;
+  &__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/DeleteMany/index.tsx

@@ -125,20 +125,25 @@ export const DeleteMany: React.FC<Props> = (props) => {
         {t('general:delete')}
       </Pill>
       <Modal className={baseClass} slug={modalSlug}>
-        <div className={`${baseClass}__template`}>
-          <h1>{t('general:confirmDeletion')}</h1>
-          <p>{t('general:aboutToDeleteCount', { count, label: getTranslation(plural, i18n) })}</p>
-          <Button
-            buttonStyle="secondary"
-            id="confirm-cancel"
-            onClick={deleting ? undefined : () => toggleModal(modalSlug)}
-            type="button"
-          >
-            {t('general:cancel')}
-          </Button>
-          <Button id="confirm-delete" onClick={deleting ? undefined : () => void handleDelete()}>
-            {deleting ? t('general:deleting') : t('general:confirm')}
-          </Button>
+        <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 : () => void handleDelete()}>
+              {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;
+  &__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;
     }
   }
 
-  &__modal-template {
-    z-index: 1;
-    position: relative;
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
+    .btn {
+      margin: 0;
+    }
   }
 }

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

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

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

@@ -6,14 +6,33 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: base(2);
 
-  &__template {
-    position: relative;
+  &__wrapper {
     z-index: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
   }
 
-  .btn {
-    margin-right: $baseline;
+  &__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/GenerateConfirmation/index.tsx

@@ -44,28 +44,32 @@ export const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props)
         {t('authentication:generateNewAPIKey')}
       </Button>
       <Modal className={baseClass} slug={modalSlug}>
-        <div className={`${baseClass}__template`}>
-          <h1>{t('authentication:confirmGeneration')}</h1>
-          <p>
-            <Translation
-              elements={{
-                1: ({ children }) => <strong>{children}</strong>,
+        <div className={`${baseClass}__wrapper`}>
+          <div className={`${baseClass}__content`}>
+            <h1>{t('authentication:confirmGeneration')}</h1>
+            <p>
+              <Translation
+                elements={{
+                  1: ({ children }) => <strong>{children}</strong>,
+                }}
+                i18nKey="authentication:generatingNewAPIKeyWillInvalidate"
+                t={t}
+              />
+            </p>
+          </div>
+          <div className={`${baseClass}__controls`}>
+            <Button
+              buttonStyle="secondary"
+              onClick={() => {
+                toggleModal(modalSlug)
               }}
-              i18nKey="authentication:generatingNewAPIKeyWillInvalidate"
-              t={t}
-            />
-          </p>
-
-          <Button
-            buttonStyle="secondary"
-            onClick={() => {
-              toggleModal(modalSlug)
-            }}
-            type="button"
-          >
-            {t('general:cancel')}
-          </Button>
-          <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>
+              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);
   }
 
-  .btn {
-    margin-right: $baseline;
+  &__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/PublishMany/index.tsx

@@ -127,20 +127,29 @@ export const PublishMany: React.FC<PublishManyProps> = (props) => {
         {t('version:publish')}
       </Pill>
       <Modal className={baseClass} slug={modalSlug}>
-        <div className={`${baseClass}__template`}>
-          <h1>{t('version:confirmPublish')}</h1>
-          <p>{t('version:aboutToPublishSelection', { label: getTranslation(plural, i18n) })}</p>
-          <Button
-            buttonStyle="secondary"
-            id="confirm-cancel"
-            onClick={submitted ? undefined : () => toggleModal(modalSlug)}
-            type="button"
-          >
-            {t('general:cancel')}
-          </Button>
-          <Button id="confirm-publish" onClick={submitted ? undefined : handlePublish}>
-            {submitted ? t('version:publishing') : t('general:confirm')}
-          </Button>
+        <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={() => void (submitted ? undefined : toggleModal(modalSlug))}
+              size="large"
+              type="button"
+            >
+              {t('general:cancel')}
+            </Button>
+            <Button
+              id="confirm-publish"
+              onClick={() => void (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;
     }
+  }
 
-    .btn {
-      margin-right: $baseline;
+  &__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;
     }
   }
 
-  &__modal-template {
-    position: relative;
-    z-index: 1;
+  &__controls {
+    display: flex;
+    gap: base(0.4);
+
+    .btn {
+      margin: 0;
+    }
   }
 }

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

@@ -152,19 +152,29 @@ export const Status: React.FC = () => {
                 {t('version:unpublish')}
               </Button>
               <Modal className={`${baseClass}__modal`} slug={unPublishModalSlug}>
-                <div className={`${baseClass}__modal-template`}>
-                  <h1>{t('version:confirmUnpublish')}</h1>
-                  <p>{t('version:aboutToUnpublish')}</p>
-                  <Button
-                    buttonStyle="secondary"
-                    onClick={processing ? undefined : () => toggleModal(unPublishModalSlug)}
-                    type="button"
-                  >
-                    {t('general:cancel')}
-                  </Button>
-                  <Button onClick={processing ? undefined : () => performAction('unpublish')}>
-                    {t(processing ? 'version:unpublishing' : 'general:confirm')}
-                  </Button>
+                <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={() =>
+                        void (processing ? undefined : toggleModal(unPublishModalSlug))
+                      }
+                      size="large"
+                      type="button"
+                    >
+                      {t('general:cancel')}
+                    </Button>
+                    <Button
+                      onClick={() => void (processing ? undefined : performAction('unpublish'))}
+                      size="large"
+                    >
+                      {t(processing ? 'version:unpublishing' : 'general:confirm')}
+                    </Button>
+                  </div>
                 </div>
               </Modal>
             </React.Fragment>
@@ -181,22 +191,28 @@ export const Status: React.FC = () => {
                 {t('version:revertToPublished')}
               </Button>
               <Modal className={`${baseClass}__modal`} slug={revertModalSlug}>
-                <div className={`${baseClass}__modal-template`}>
-                  <h1>{t('version:confirmRevertToSaved')}</h1>
-                  <p>{t('version:aboutToRevertToPublished')}</p>
-                  <Button
-                    buttonStyle="secondary"
-                    onClick={processing ? undefined : () => toggleModal(revertModalSlug)}
-                    type="button"
-                  >
-                    {t('general:cancel')}
-                  </Button>
-                  <Button
-                    id="action-revert-to-published-confirm"
-                    onClick={processing ? undefined : () => performAction('revert')}
-                  >
-                    {t(processing ? 'version:reverting' : 'general:confirm')}
-                  </Button>
+                <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={() => void (processing ? undefined : toggleModal(revertModalSlug))}
+                      size="large"
+                      type="button"
+                    >
+                      {t('general:cancel')}
+                    </Button>
+                    <Button
+                      id="action-revert-to-published-confirm"
+                      onClick={() => void (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);
   }
 
-  .btn {
-    margin-right: $baseline;
+  &__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/UnpublishMany/index.tsx

@@ -125,20 +125,29 @@ export const UnpublishMany: React.FC<UnpublishManyProps> = (props) => {
         {t('version:unpublish')}
       </Pill>
       <Modal className={baseClass} slug={modalSlug}>
-        <div className={`${baseClass}__template`}>
-          <h1>{t('version:confirmUnpublish')}</h1>
-          <p>{t('version:aboutToUnpublishSelection', { label: getTranslation(plural, i18n) })}</p>
-          <Button
-            buttonStyle="secondary"
-            id="confirm-cancel"
-            onClick={submitted ? undefined : () => toggleModal(modalSlug)}
-            type="button"
-          >
-            {t('general:cancel')}
-          </Button>
-          <Button id="confirm-unpublish" onClick={submitted ? undefined : handleUnpublish}>
-            {submitted ? t('version:unpublishing') : t('general:confirm')}
-          </Button>
+        <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}
+              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 { WithServerSideProps } from '../../elements/WithServerSideProps/index.js'
 export { withMergedProps } from '../../elements/withMergedProps/index.js' // cannot be within a 'use client', thus we export this from shared
 export { PayloadIcon } from '../../graphics/Icon/index.js'