From aa94c00bc6504ba57637de39baf5b4532e309687 Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Wed, 27 Sep 2023 13:18:29 -0400
Subject: [PATCH] chore: misc css (#3391)

---
 .../elements/Collapsible/index.scss           |   6 +-
 .../elements/ColumnSelector/index.scss        |   4 +
 .../elements/DocumentControls/index.scss      |   6 +-
 .../elements/DocumentControls/index.tsx       |   6 +-
 .../elements/DocumentDrawer/index.scss        |  20 ++-
 .../elements/DocumentHeader/Tabs/index.scss   |   2 +-
 .../elements/DocumentHeader/index.scss        |   4 +-
 .../components/elements/Drawer/index.scss     |  42 ++---
 .../components/elements/Drawer/index.tsx      |   4 +-
 .../elements/ListControls/index.scss          |  21 ++-
 .../components/elements/ListDrawer/index.scss |  20 ++-
 .../components/elements/MainMenu/index.scss   | 105 ++++++------
 .../components/elements/MainMenu/index.tsx    |   1 +
 .../admin/components/elements/Nav/index.scss  |   4 -
 .../admin/components/elements/Pill/index.scss |  10 ++
 .../admin/components/elements/Pill/index.tsx  |   2 +-
 .../WhereBuilder/Condition/index.scss         |  32 ++--
 .../elements/WhereBuilder/index.scss          |  34 ++--
 .../forms/FieldDescription/index.scss         |   8 +-
 .../forms/FieldDescription/index.tsx          |  12 +-
 .../forms/FieldDescription/types.ts           |   1 +
 .../components/forms/RenderFields/index.scss  |  55 ++++++
 .../components/forms/RenderFields/index.tsx   |  17 +-
 .../components/forms/RenderFields/types.ts    |   1 +
 .../forms/field-types/Array/ArrayRow.tsx      |   1 +
 .../forms/field-types/Array/index.scss        |  51 +++---
 .../forms/field-types/Array/index.tsx         | 159 +++++++++---------
 .../forms/field-types/Blocks/BlockRow.tsx     |   1 +
 .../forms/field-types/Blocks/index.scss       |  19 ++-
 .../forms/field-types/Blocks/index.tsx        | 135 ++++++++-------
 .../forms/field-types/Checkbox/Input.tsx      |   5 +-
 .../forms/field-types/Checkbox/index.scss     |  15 +-
 .../forms/field-types/Checkbox/index.tsx      |   3 +-
 .../forms/field-types/Code/index.scss         |   1 -
 .../forms/field-types/Code/index.tsx          |  21 ++-
 .../forms/field-types/Collapsible/index.scss  |   2 -
 .../forms/field-types/Collapsible/index.tsx   |  25 +--
 .../field-types/ConfirmPassword/index.scss    |   1 -
 .../field-types/ConfirmPassword/index.tsx     |   9 +-
 .../forms/field-types/DateTime/index.scss     |   2 -
 .../forms/field-types/DateTime/index.tsx      |  21 ++-
 .../forms/field-types/Email/index.scss        |   1 -
 .../forms/field-types/Email/index.tsx         |   9 +-
 .../forms/field-types/Group/index.scss        |  48 ++++--
 .../forms/field-types/Group/index.tsx         |   6 +-
 .../forms/field-types/JSON/index.scss         |   1 -
 .../forms/field-types/JSON/index.tsx          |  21 ++-
 .../forms/field-types/Number/index.scss       |   1 -
 .../forms/field-types/Number/index.tsx        |  23 ++-
 .../forms/field-types/Password/index.scss     |   1 -
 .../forms/field-types/Password/index.tsx      |   9 +-
 .../forms/field-types/Point/index.scss        |   2 +-
 .../forms/field-types/Point/index.tsx         |  21 ++-
 .../forms/field-types/RadioGroup/Input.tsx    |  23 ++-
 .../forms/field-types/RadioGroup/index.scss   |   2 -
 .../forms/field-types/Relationship/index.scss |   1 -
 .../forms/field-types/Relationship/index.tsx  |  23 ++-
 .../forms/field-types/Row/index.scss          |  17 +-
 .../forms/field-types/Row/index.tsx           |   6 +-
 .../forms/field-types/Select/Input.tsx        |  15 +-
 .../forms/field-types/Select/index.scss       |   1 -
 .../forms/field-types/Tabs/index.scss         |   6 +-
 .../forms/field-types/Tabs/index.tsx          |  10 +-
 .../forms/field-types/Text/Input.tsx          |   9 +-
 .../forms/field-types/Text/index.scss         |   1 -
 .../forms/field-types/Textarea/Input.tsx      |  21 ++-
 .../forms/field-types/Textarea/index.scss     |   1 -
 .../forms/field-types/Upload/Input.tsx        |  21 ++-
 .../forms/field-types/Upload/index.scss       |   1 -
 .../components/forms/field-types/shared.ts    |   2 +
 .../components/templates/Default/index.scss   |   4 -
 .../components/views/Account/Default.tsx      |   2 +
 .../admin/components/views/Account/index.scss |   7 +-
 .../components/views/Dashboard/Default.tsx    |   4 +-
 .../components/views/Dashboard/index.scss     |  52 +++---
 .../views/Global/Default/index.scss           |  94 +++++++----
 .../components/views/Global/Default/index.tsx |   7 +-
 .../admin/components/views/Login/index.scss   |  14 ++
 .../admin/components/views/Login/index.tsx    |   2 +-
 .../admin/components/views/Logout/index.scss  |  12 +-
 .../admin/components/views/Logout/index.tsx   |   1 -
 .../views/Version/Compare/index.tsx           |  11 +-
 .../Version/RenderFieldsToDiff/index.scss     |  12 +-
 .../components/views/Version/Version.tsx      |  34 ++--
 .../admin/components/views/Version/index.scss |  27 +--
 .../components/views/Versions/index.scss      |  28 ++-
 .../views/collections/Edit/Auth/APIKey.tsx    |   5 +-
 .../views/collections/Edit/Auth/index.scss    |  35 +++-
 .../views/collections/Edit/Auth/index.tsx     |  48 +++---
 .../views/collections/Edit/Auth/types.ts      |   1 +
 .../views/collections/Edit/Default/index.scss |  88 ++++++----
 .../views/collections/Edit/Default/index.tsx  |  15 +-
 .../views/collections/Edit/Upload/index.scss  |   2 +-
 .../views/collections/Edit/Upload/index.tsx   |  11 +-
 .../views/collections/List/Default.tsx        |  89 +++++-----
 .../collections/List/SelectAll/index.scss     |   7 +
 .../collections/List/SelectAll/index.tsx      |   4 +
 .../collections/List/SelectRow/index.scss     |  46 +----
 .../collections/List/SelectRow/index.tsx      |  10 +-
 .../views/collections/List/index.scss         |  40 ++++-
 packages/payload/src/admin/scss/app.scss      |   4 +
 packages/payload/src/admin/scss/type.scss     |   8 +-
 packages/payload/src/admin/scss/vars.scss     |   4 +-
 packages/richtext-slate/src/field/index.scss  |   2 +-
 test/_community/.gitignore                    |   2 +
 .../components/AfterDashboard/index.scss      |  17 ++
 .../components/CustomTabComponent/index.scss  |   1 +
 test/admin/components/DemoUIField/Field.tsx   |   2 +-
 test/admin/config.ts                          |  20 ++-
 test/admin/e2e.spec.ts                        | 125 ++++++++++----
 test/admin/shared.ts                          |   5 +
 test/auth/config.ts                           |  14 ++
 test/field-error-states/e2e.spec.ts           |  14 +-
 test/fields/e2e.spec.ts                       |  60 ++-----
 test/helpers.ts                               |   4 +
 test/refresh-permissions/e2e.spec.ts          |   2 +-
 test/versions/collections/Posts.ts            |  21 +++
 test/versions/config.ts                       |   3 +-
 test/versions/e2e.spec.ts                     |   8 +-
 test/versions/shared.ts                       |   1 +
 120 files changed, 1317 insertions(+), 903 deletions(-)
 create mode 100644 packages/payload/src/admin/components/forms/RenderFields/index.scss
 create mode 100644 packages/payload/src/admin/components/views/collections/List/SelectAll/index.scss
 create mode 100644 test/_community/.gitignore
 create mode 100644 test/versions/collections/Posts.ts

diff --git a/packages/payload/src/admin/components/elements/Collapsible/index.scss b/packages/payload/src/admin/components/elements/Collapsible/index.scss
index 1c7f978bf4..c19a0e0250 100644
--- a/packages/payload/src/admin/components/elements/Collapsible/index.scss
+++ b/packages/payload/src/admin/components/elements/Collapsible/index.scss
@@ -10,10 +10,6 @@
     position: relative;
   }
 
-  &--nested {
-    margin-bottom: $baseline !important;
-  }
-
   &__drag {
     opacity: 0.5;
     position: absolute;
@@ -111,7 +107,7 @@
     background-color: var(--theme-elevation-0);
     border-bottom-left-radius: $style-radius-s;
     border-bottom-right-radius: $style-radius-s;
-    padding: $baseline $baseline 0 $baseline;
+    padding: var(--base);
   }
 
   @include small-break {
diff --git a/packages/payload/src/admin/components/elements/ColumnSelector/index.scss b/packages/payload/src/admin/components/elements/ColumnSelector/index.scss
index 17c35e6cb4..a928ec6d4d 100644
--- a/packages/payload/src/admin/components/elements/ColumnSelector/index.scss
+++ b/packages/payload/src/admin/components/elements/ColumnSelector/index.scss
@@ -16,4 +16,8 @@
       background-color: var(--theme-elevation-150);
     }
   }
+
+  @include small-break {
+    padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+  }
 }
diff --git a/packages/payload/src/admin/components/elements/DocumentControls/index.scss b/packages/payload/src/admin/components/elements/DocumentControls/index.scss
index f8d8a6d17b..5fc0a102c0 100644
--- a/packages/payload/src/admin/components/elements/DocumentControls/index.scss
+++ b/packages/payload/src/admin/components/elements/DocumentControls/index.scss
@@ -8,7 +8,6 @@
   z-index: 1;
   display: flex;
   align-items: center;
-  --controlsHeight: calc(var(--base) * 3);
 
   &::after {
     content: '';
@@ -32,7 +31,7 @@
   }
 
   &__content {
-    height: var(--controlsHeight);
+    height: var(--doc-controls-height);
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -174,8 +173,7 @@
     // The timestamps and meta can scroll past
     // The same container needs to the sticky, though
     // So we use a static height with a negative top
-    --controlsHeight: calc(var(--base) * 1.5);
-    top: calc(var(--controlsHeight) * -1);
+    top: calc(var(--doc-controls-height) * -1);
     padding-right: 0;
     padding-left: 0;
 
diff --git a/packages/payload/src/admin/components/elements/DocumentControls/index.tsx b/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
index 15ff320feb..3c6fcd3b84 100644
--- a/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
+++ b/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
@@ -32,6 +32,7 @@ export const DocumentControls: React.FC<{
   id?: string
   isEditing?: boolean
   permissions?: CollectionPermission | GlobalPermission
+  isAccountView?: boolean
 }> = (props) => {
   const {
     id,
@@ -42,6 +43,7 @@ export const DocumentControls: React.FC<{
     hasSavePermission,
     isEditing,
     permissions,
+    isAccountView,
   } = props
 
   const { publishedDoc } = useDocumentInfo()
@@ -76,7 +78,7 @@ export const DocumentControls: React.FC<{
       <div className={`${baseClass}__wrapper`}>
         <div className={`${baseClass}__content`}>
           <ul className={`${baseClass}__meta`}>
-            {collection && !isEditing && (
+            {collection && !isEditing && !isAccountView && (
               <li className={`${baseClass}__list-item`}>
                 <p className={`${baseClass}__value`}>
                   {t('creatingNewLabel', {
@@ -113,7 +115,7 @@ export const DocumentControls: React.FC<{
                   )}
               </Fragment>
             )}
-            {collection?.timestamps && isEditing && (
+            {collection?.timestamps && (isEditing || isAccountView) && (
               <Fragment>
                 <li
                   className={[`${baseClass}__list-item`, `${baseClass}__value-wrap`]
diff --git a/packages/payload/src/admin/components/elements/DocumentDrawer/index.scss b/packages/payload/src/admin/components/elements/DocumentDrawer/index.scss
index 9360e97ff2..9fec75818f 100644
--- a/packages/payload/src/admin/components/elements/DocumentDrawer/index.scss
+++ b/packages/payload/src/admin/components/elements/DocumentDrawer/index.scss
@@ -4,18 +4,17 @@
   &__header {
     width: 100%;
     margin-top: base(2.5);
-    margin-bottom: base(1);
-
-    @include mid-break {
-      margin-top: base(1.5);
-    }
+    display: flex;
+    flex-direction: column;
+    gap: base(0.5);
+    align-items: flex-start;
   }
 
   &__header-content {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-bottom: base(1);
+    width: 100%;
   }
 
   &__header-text {
@@ -62,4 +61,13 @@
       }
     }
   }
+
+  @include mid-break {
+    &__header {
+      margin-top: base(1.5);
+      margin-bottom: base(0.5);
+      padding-left: var(--gutter-h);
+      padding-right: var(--gutter-h);
+    }
+  }
 }
diff --git a/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.scss b/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.scss
index 8007b911d1..d6408fa194 100644
--- a/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.scss
+++ b/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.scss
@@ -7,6 +7,7 @@
     list-style: none;
     align-items: center;
     margin: 0;
+    padding-left: 0;
   }
 
   &__tab {
@@ -21,7 +22,6 @@
     &__tabs {
       padding: 0;
       margin-left: var(--gutter-h);
-      margin-bottom: calc(var(--base) / 2);
     }
 
     &__tab {
diff --git a/packages/payload/src/admin/components/elements/DocumentHeader/index.scss b/packages/payload/src/admin/components/elements/DocumentHeader/index.scss
index a6562fcdc3..9de8822b0b 100644
--- a/packages/payload/src/admin/components/elements/DocumentHeader/index.scss
+++ b/packages/payload/src/admin/components/elements/DocumentHeader/index.scss
@@ -7,6 +7,8 @@
   display: flex;
   align-items: center;
   position: relative;
+  display: flex;
+  gap: calc(var(--base) / 2);
 
   &::after {
     content: '';
@@ -34,6 +36,7 @@
     padding-bottom: calc(var(--base) / 1.5);
     flex-direction: column;
     gap: calc(var(--base) / 2);
+    padding-bottom: calc(var(--base) / 2);
 
     &__title {
       width: 100%;
@@ -44,6 +47,5 @@
 
   @include small-break {
     margin-top: 0;
-    padding-bottom: 0;
   }
 }
diff --git a/packages/payload/src/admin/components/elements/Drawer/index.scss b/packages/payload/src/admin/components/elements/Drawer/index.scss
index 4732d2940b..cb1231b55c 100644
--- a/packages/payload/src/admin/components/elements/Drawer/index.scss
+++ b/packages/payload/src/admin/components/elements/Drawer/index.scss
@@ -1,5 +1,7 @@
 @import '../../../scss/styles.scss';
 
+$transTime: 200ms;
+
 .drawer {
   display: flex;
   overflow: hidden;
@@ -15,18 +17,17 @@
     bottom: 0;
     left: 0;
     opacity: 0;
-    transition: all 300ms ease-out;
+    transition: all $transTime linear;
   }
 
   &__content {
-    @include blur-bg();
     opacity: 0;
-    transform: translateX(#{base(4)});
+    transform: translateX(calc(var(--base) * 4));
     position: relative;
     z-index: 2;
-    width: 100%;
-    transition: all 300ms ease-out;
+    width: calc(100% - var(--gutter-h));
     overflow: hidden;
+    transition: all $transTime linear;
   }
 
   &__content-children {
@@ -37,19 +38,21 @@
   }
 
   &--is-open {
-    .drawer__content,
-    .drawer__blur-bg,
-    .drawer__close {
-      opacity: 1;
-    }
+    .drawer {
+      &__content,
+      &__blur-bg,
+      &__close {
+        opacity: 1;
+      }
 
-    .drawer__close {
-      transition: opacity 300ms ease-in-out;
-      transition-delay: 100ms;
-    }
+      &__close {
+        transition: opacity $transTime linear;
+        transition-delay: $transTime;
+      }
 
-    .drawer__content {
-      transform: translateX(0);
+      &__content {
+        transform: translateX(0);
+      }
     }
   }
 
@@ -59,12 +62,13 @@
     z-index: 2;
     flex-shrink: 0;
     text-indent: -9999px;
-    background: rgba(0, 0, 0, 0.08);
     cursor: pointer;
     opacity: 0;
     will-change: opacity;
     transition: none;
     transition-delay: 0ms;
+    flex-grow: 1;
+    background: transparent;
 
     &:active,
     &:focus {
@@ -112,10 +116,6 @@
     &__header {
       margin-top: base(1.5);
     }
-
-    &__close {
-      width: base(1);
-    }
   }
 }
 
diff --git a/packages/payload/src/admin/components/elements/Drawer/index.tsx b/packages/payload/src/admin/components/elements/Drawer/index.tsx
index aca3151582..bd05f1b9ab 100644
--- a/packages/payload/src/admin/components/elements/Drawer/index.tsx
+++ b/packages/payload/src/admin/components/elements/Drawer/index.tsx
@@ -85,12 +85,10 @@ export const Drawer: React.FC<Props> = ({
           className={`${baseClass}__close`}
           id={`close-drawer__${slug}`}
           onClick={() => closeModal(slug)}
-          style={{
-            width: 'var(--gutter-h)',
-          }}
           type="button"
         />
         <div className={`${baseClass}__content`}>
+          <div className={`${baseClass}__blur-bg`} />
           <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>
             <EditDepthContext.Provider value={drawerDepth + 1}>
               {header && header}
diff --git a/packages/payload/src/admin/components/elements/ListControls/index.scss b/packages/payload/src/admin/components/elements/ListControls/index.scss
index c44bb5dc17..1d54c99bb4 100644
--- a/packages/payload/src/admin/components/elements/ListControls/index.scss
+++ b/packages/payload/src/admin/components/elements/ListControls/index.scss
@@ -1,8 +1,6 @@
 @import '../../../scss/styles';
 
 .list-controls {
-  margin-bottom: $baseline;
-
   &__wrap {
     display: flex;
     align-items: center;
@@ -66,12 +64,15 @@
     }
 
     &__buttons-wrap {
-      margin-left: - base(0.25);
-      margin-right: - base(0.25);
-      width: calc(100% + #{base(0.5)});
+      [dir='ltr'] & {
+        margin-right: 0;
+      }
+
+      [dir='rtl'] & {
+        margin-left: 0;
+      }
 
       .pill {
-        margin: 0 base(0.25);
         padding: base(0.5) base(1);
 
         svg {
@@ -85,10 +86,16 @@
       width: 100%;
     }
 
+    .column-selector,
+    .where-builder,
+    .sort-complex {
+      margin-top: calc(var(--base) / 2);
+    }
+
     &__toggle-columns,
     &__toggle-where,
     &__toggle-sort {
-      flex-grow: 1;
+      flex: 1;
     }
   }
 }
diff --git a/packages/payload/src/admin/components/elements/ListDrawer/index.scss b/packages/payload/src/admin/components/elements/ListDrawer/index.scss
index ddf6c4daed..cd1f52a190 100644
--- a/packages/payload/src/admin/components/elements/ListDrawer/index.scss
+++ b/packages/payload/src/admin/components/elements/ListDrawer/index.scss
@@ -12,6 +12,7 @@
 
   &__header-wrap {
     display: flex;
+    gap: base(1);
   }
 
   &__header-content {
@@ -22,8 +23,9 @@
 
     button .pill {
       pointer-events: none;
-      margin-top: base(0.25);
-      margin-right: base(0.5);
+      margin: 0;
+      top: 4px;
+      margin-left: base(0.5);
     }
   }
 
@@ -31,6 +33,10 @@
     margin: 0;
   }
 
+  &__header-close {
+    flex-shrink: 0;
+  }
+
   &__toggler {
     background: transparent;
     border: 0;
@@ -90,5 +96,15 @@
     .collection-list__header {
       margin-bottom: base(0.5);
     }
+
+    &__select-collection-wrap {
+      margin-top: calc(var(--base) / 2);
+    }
+
+    &__header-content {
+      button .pill {
+        top: 2px;
+      }
+    }
   }
 }
diff --git a/packages/payload/src/admin/components/elements/MainMenu/index.scss b/packages/payload/src/admin/components/elements/MainMenu/index.scss
index bd0e88f02e..990ef61de2 100644
--- a/packages/payload/src/admin/components/elements/MainMenu/index.scss
+++ b/packages/payload/src/admin/components/elements/MainMenu/index.scss
@@ -4,12 +4,14 @@ $transTime: 200ms;
 
 .main-menu {
   display: flex;
+  overflow: hidden;
   position: fixed;
   height: 100vh;
 
   &__blur-bg {
     @include blur-bg();
     position: absolute;
+    z-index: 1;
     top: 0;
     right: 0;
     bottom: 0;
@@ -19,54 +21,35 @@ $transTime: 200ms;
   }
 
   &__content {
-    padding: base(1) 0 base(2);
-    position: relative;
     opacity: 0;
-    transform: translateX(calc(var(--base) * -1));
-    transition: transform $transTime linear;
-    overflow: auto;
-    width: 50%;
-  }
-
-  &__content-children {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    padding-left: calc(var(--base) * 3);
-  }
-
-  &__close {
-    @extend %btn-reset;
+    transform: translateX(calc(var(--base) * -2));
     position: relative;
     z-index: 2;
-    flex-shrink: 0;
-    text-indent: -9999px;
-    background: rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    opacity: 0;
-    will-change: opacity;
-    transition: none;
-    transition-delay: 0ms;
-    flex-grow: 1;
-    flex-shrink: 1;
-
-    &:active,
-    &:focus {
-      outline: 0;
-    }
+    width: 50%;
 
     &::before {
       position: absolute;
       top: 0;
-      left: 0;
+      left: 100%;
       height: 100%;
       width: calc(var(--base) * 4);
       content: ' ';
       background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
+      pointer-events: none;
     }
   }
 
+  &__content-children {
+    position: relative;
+    z-index: 1;
+    overflow: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+    padding: var(--base) 0 calc(var(--base) * 3) calc(var(--base) * 3);
+  }
+
   &--is-open {
     .main-menu {
       &__content,
@@ -76,16 +59,38 @@ $transTime: 200ms;
       }
 
       &__close {
-        transition: opacity $transTime ease-in-out;
+        transition: opacity $transTime linear;
         transition-delay: $transTime;
       }
 
       &__content {
         transform: translateX(0);
+        transition: all $transTime linear;
       }
     }
   }
 
+  &__close {
+    @extend %btn-reset;
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+    text-indent: -9999px;
+    cursor: pointer;
+    opacity: 0;
+    will-change: opacity;
+    transition: none;
+    transition-delay: 0ms;
+    flex-grow: 1;
+    flex-shrink: 1;
+    background: rgba(0, 0, 0, 0.2);
+
+    &:active,
+    &:focus {
+      outline: 0;
+    }
+  }
+
   &__link {
     margin: 0;
 
@@ -104,10 +109,6 @@ $transTime: 200ms;
     gap: calc(var(--base) / 2);
   }
 
-  &.payload__modal-item--exitActive {
-    transition: none;
-  }
-
   @include large-break {
     &__content-children {
       padding-left: var(--gutter-h);
@@ -115,19 +116,27 @@ $transTime: 200ms;
   }
 
   @include mid-break {
-    .main-menu {
-      &__close {
+    &__close {
+      display: none;
+    }
+
+    &__content {
+      width: 100%;
+
+      &::after {
         display: none;
       }
+    }
 
-      &__content {
-        width: 100%;
-        padding-top: calc(var(--base) * 2);
+    &__content-children {
+      padding-top: calc(var(--base) * 0.5);
+    }
+  }
 
-        &::after {
-          display: none;
-        }
-      }
+  @include small-break {
+    &__content-children {
+      padding-top: calc(var(--base) * 2);
+      padding-bottom: calc(var(--base) * 2);
     }
   }
 }
diff --git a/packages/payload/src/admin/components/elements/MainMenu/index.tsx b/packages/payload/src/admin/components/elements/MainMenu/index.tsx
index 0a69b00d8a..1de791aed1 100644
--- a/packages/payload/src/admin/components/elements/MainMenu/index.tsx
+++ b/packages/payload/src/admin/components/elements/MainMenu/index.tsx
@@ -85,6 +85,7 @@ export const MainMenu: React.FC = () => {
     >
       <div className={`${baseClass}__blur-bg`} />
       <nav className={`${baseClass}__content`}>
+        <div className={`${baseClass}__blur-bg`} />
         <Gutter className={`${baseClass}__content-children`}>
           {Array.isArray(beforeNavLinks) &&
             beforeNavLinks.map((Component, i) => <Component key={i} />)}
diff --git a/packages/payload/src/admin/components/elements/Nav/index.scss b/packages/payload/src/admin/components/elements/Nav/index.scss
index 7e57de0e89..c750db1f48 100644
--- a/packages/payload/src/admin/components/elements/Nav/index.scss
+++ b/packages/payload/src/admin/components/elements/Nav/index.scss
@@ -96,10 +96,6 @@
     &__content {
       padding: 0 calc(var(--gutter-h) / 2);
     }
-
-    &__nav-wrapper {
-      margin-left: calc(var(--base) / 1.125);
-    }
   }
 
   @include mid-break {
diff --git a/packages/payload/src/admin/components/elements/Pill/index.scss b/packages/payload/src/admin/components/elements/Pill/index.scss
index f2e0a60917..4590ff75be 100644
--- a/packages/payload/src/admin/components/elements/Pill/index.scss
+++ b/packages/payload/src/admin/components/elements/Pill/index.scss
@@ -32,6 +32,16 @@
     outline-offset: var(--accessibility-outline-offset);
   }
 
+  .icon {
+    flex-shrink: 0;
+  }
+
+  &__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &--has-action {
     cursor: pointer;
     text-decoration: none;
diff --git a/packages/payload/src/admin/components/elements/Pill/index.tsx b/packages/payload/src/admin/components/elements/Pill/index.tsx
index d719f8037e..ca8a1dd25c 100644
--- a/packages/payload/src/admin/components/elements/Pill/index.tsx
+++ b/packages/payload/src/admin/components/elements/Pill/index.tsx
@@ -83,7 +83,7 @@ const StaticPill: React.FC<Props> = (props) => {
       type={Element === 'button' ? 'button' : undefined}
     >
       {icon && alignIcon === 'left' && <React.Fragment>{icon}</React.Fragment>}
-      {children}
+      <span className={`${baseClass}__label`}>{children}</span>
       {icon && alignIcon === 'right' && <React.Fragment>{icon}</React.Fragment>}
     </Element>
   )
diff --git a/packages/payload/src/admin/components/elements/WhereBuilder/Condition/index.scss b/packages/payload/src/admin/components/elements/WhereBuilder/Condition/index.scss
index d78f417abf..484ee95465 100644
--- a/packages/payload/src/admin/components/elements/WhereBuilder/Condition/index.scss
+++ b/packages/payload/src/admin/components/elements/WhereBuilder/Condition/index.scss
@@ -4,47 +4,42 @@
   &__wrap {
     display: flex;
     align-items: center;
+    gap: var(--base);
   }
 
   &__inputs {
     display: flex;
     flex-grow: 1;
+    align-items: center;
+    gap: var(--base);
 
     > div {
       flex-basis: 100%;
     }
   }
 
-  [dir='rtl'] &__field,
-  &__operator {
-    margin-left: $baseline;
-    margin-right: 0;
-  }
-
-  &__field,
-  &__operator {
-    margin-right: $baseline;
-  }
-
   &__actions {
     flex-shrink: 0;
+    display: flex;
+    gap: calc(var(--base) / 2);
+    padding: calc(var(--base) / 2) 0;
   }
 
   .btn {
     vertical-align: middle;
-    margin: 0 0 0 $baseline;
-    [dir='rtl'] & {
-      margin: 0 $baseline 0 0;
-    }
+    margin: 0;
   }
 
   @include mid-break {
     &__wrap {
       align-items: initial;
+      gap: calc(var(--base) / 2);
     }
 
     &__inputs {
-      display: block;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+      align-items: stretch;
     }
 
     &__actions {
@@ -52,10 +47,5 @@
       flex-direction: column;
       justify-content: space-between;
     }
-
-    &__field,
-    &__operator {
-      margin: 0 0 base(0.5);
-    }
   }
 }
diff --git a/packages/payload/src/admin/components/elements/WhereBuilder/index.scss b/packages/payload/src/admin/components/elements/WhereBuilder/index.scss
index 48447eff25..012531c764 100644
--- a/packages/payload/src/admin/components/elements/WhereBuilder/index.scss
+++ b/packages/payload/src/admin/components/elements/WhereBuilder/index.scss
@@ -2,10 +2,20 @@
 
 .where-builder {
   background: var(--theme-elevation-50);
-  padding: base(0.5) $baseline $baseline;
+  padding: var(--base);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base) / 2);
 
-  &__label {
-    margin: base(0.5) 0;
+  .btn {
+    margin: 0;
+    align-self: flex-start;
+  }
+
+  &__no-filters {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
   }
 
   &__or-filters,
@@ -13,18 +23,18 @@
     list-style: none;
     margin: 0;
     padding: 0;
-  }
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
 
-  &__add-or,
-  &__add-first-filter {
-    &.btn {
-      margin-bottom: 0;
+    li {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
     }
   }
 
-  &__add-first-filter {
-    &.btn {
-      margin-top: 0;
-    }
+  @include small-break {
+    padding: calc(var(--base) / 2);
   }
 }
diff --git a/packages/payload/src/admin/components/forms/FieldDescription/index.scss b/packages/payload/src/admin/components/forms/FieldDescription/index.scss
index 92bbd0bf9d..f2b27eaba2 100644
--- a/packages/payload/src/admin/components/forms/FieldDescription/index.scss
+++ b/packages/payload/src/admin/components/forms/FieldDescription/index.scss
@@ -2,7 +2,11 @@
 
 .field-description {
   display: flex;
-  padding-top: base(0.25);
-  padding-bottom: base(0.25);
   color: var(--theme-elevation-400);
+  margin-top: calc(var(--base) / 4);
+
+  &--margin-bottom {
+    margin-top: 0;
+    margin-bottom: calc(var(--base) / 2);
+  }
 }
diff --git a/packages/payload/src/admin/components/forms/FieldDescription/index.tsx b/packages/payload/src/admin/components/forms/FieldDescription/index.tsx
index cbcb8b9c45..b133adbdbe 100644
--- a/packages/payload/src/admin/components/forms/FieldDescription/index.tsx
+++ b/packages/payload/src/admin/components/forms/FieldDescription/index.tsx
@@ -10,7 +10,7 @@ import { isComponent } from './types'
 const baseClass = 'field-description'
 
 const FieldDescription: React.FC<Props> = (props) => {
-  const { className, description, value } = props
+  const { className, description, value, marginPlacement } = props
 
   const { i18n } = useTranslation()
 
@@ -21,7 +21,15 @@ const FieldDescription: React.FC<Props> = (props) => {
 
   if (description) {
     return (
-      <div className={[baseClass, className].filter(Boolean).join(' ')}>
+      <div
+        className={[
+          baseClass,
+          className,
+          marginPlacement && `${baseClass}--margin-${marginPlacement}`,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
         {typeof description === 'function'
           ? description({ value })
           : getTranslation(description, i18n)}
diff --git a/packages/payload/src/admin/components/forms/FieldDescription/types.ts b/packages/payload/src/admin/components/forms/FieldDescription/types.ts
index 98742670bd..d530fffb31 100644
--- a/packages/payload/src/admin/components/forms/FieldDescription/types.ts
+++ b/packages/payload/src/admin/components/forms/FieldDescription/types.ts
@@ -14,6 +14,7 @@ export type Props = {
   className?: string
   description?: Description
   value?: unknown
+  marginPlacement?: 'top' | 'bottom'
 }
 
 export function isComponent(description: Description): description is DescriptionComponent {
diff --git a/packages/payload/src/admin/components/forms/RenderFields/index.scss b/packages/payload/src/admin/components/forms/RenderFields/index.scss
new file mode 100644
index 0000000000..00d38a2dd9
--- /dev/null
+++ b/packages/payload/src/admin/components/forms/RenderFields/index.scss
@@ -0,0 +1,55 @@
+@import '../../../scss/styles.scss';
+
+.render-fields {
+  --spacing-field: var(--base);
+
+  &--margins-small {
+    --spacing-field: var(--base);
+  }
+
+  &--margins-none {
+    --spacing-field: 0;
+  }
+
+  & > .field-type {
+    margin-bottom: var(--spacing-field);
+
+    &[type='hidden'] {
+      margin-bottom: 0;
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // at the top-level, add extra margins for the following field types
+  &:not(.render-fields--margins-small) {
+    & > .field-type {
+      &.group-field,
+      &.blocks-field,
+      &.array-field,
+      &.collapsible-field,
+      &.rich-text {
+        margin-top: calc(var(--spacing-field) * 2);
+        margin-bottom: calc(var(--spacing-field) * 2);
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  @include small-break {
+    --spacing-field: calc(var(--base) / 2);
+  }
+}
diff --git a/packages/payload/src/admin/components/forms/RenderFields/index.tsx b/packages/payload/src/admin/components/forms/RenderFields/index.tsx
index 3c9a901334..f99d064aa7 100644
--- a/packages/payload/src/admin/components/forms/RenderFields/index.tsx
+++ b/packages/payload/src/admin/components/forms/RenderFields/index.tsx
@@ -9,6 +9,7 @@ import useIntersect from '../../../hooks/useIntersect'
 import { useOperation } from '../../utilities/OperationProvider'
 import RenderCustomComponent from '../../utilities/RenderCustomComponent'
 import { filterFields } from './filterFields'
+import './index.scss'
 
 const baseClass = 'render-fields'
 
@@ -21,7 +22,7 @@ const intersectionObserverOptions = {
 // This is so that we can conditionally render fields before reducing them, if desired
 // See the sidebar in '../collections/Edit/Default/index.tsx' for an example
 const RenderFields: React.FC<Props> = (props) => {
-  const { className, fieldTypes, forceRender } = props
+  const { className, fieldTypes, forceRender, margins } = props
 
   const { i18n, t } = useTranslation('general')
   const [hasRendered, setHasRendered] = useState(Boolean(forceRender))
@@ -38,8 +39,6 @@ const RenderFields: React.FC<Props> = (props) => {
     }
   }, [shouldRender, hasRendered])
 
-  const classes = [baseClass, className].filter(Boolean).join(' ')
-
   let fieldsToRender = 'fields' in props ? props?.fields : null
 
   if (!fieldsToRender && 'fieldSchema' in props) {
@@ -57,7 +56,17 @@ const RenderFields: React.FC<Props> = (props) => {
 
   if (fieldsToRender) {
     return (
-      <div className={classes} ref={intersectionRef}>
+      <div
+        className={[
+          baseClass,
+          className,
+          margins && `${baseClass}--margins-${margins}`,
+          margins === false && `${baseClass}--margins-none`,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        ref={intersectionRef}
+      >
         {hasRendered &&
           fieldsToRender.map((reducedField, fieldIndex) => {
             const {
diff --git a/packages/payload/src/admin/components/forms/RenderFields/types.ts b/packages/payload/src/admin/components/forms/RenderFields/types.ts
index eca4774ed8..027a3c4bd5 100644
--- a/packages/payload/src/admin/components/forms/RenderFields/types.ts
+++ b/packages/payload/src/admin/components/forms/RenderFields/types.ts
@@ -6,6 +6,7 @@ import type { ReducedField } from './filterFields'
 export type Props = {
   className?: string
   fieldTypes: FieldTypes
+  margins?: 'small' | false
   forceRender?: boolean
 } & (
   | {
diff --git a/packages/payload/src/admin/components/forms/field-types/Array/ArrayRow.tsx b/packages/payload/src/admin/components/forms/field-types/Array/ArrayRow.tsx
index 934f60f178..933d8497d6 100644
--- a/packages/payload/src/admin/components/forms/field-types/Array/ArrayRow.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Array/ArrayRow.tsx
@@ -129,6 +129,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
           indexPath={indexPath}
           permissions={permissions?.fields}
           readOnly={readOnly}
+          margins="small"
         />
       </Collapsible>
     </div>
diff --git a/packages/payload/src/admin/components/forms/field-types/Array/index.scss b/packages/payload/src/admin/components/forms/field-types/Array/index.scss
index 9f4982da10..232d6f2b43 100644
--- a/packages/payload/src/admin/components/forms/field-types/Array/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Array/index.scss
@@ -1,10 +1,20 @@
 @import '../../../../scss/styles.scss';
 
 .array-field {
-  margin: 0 0 base(2);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base) / 2);
 
-  &:last-child {
-    margin-bottom: base(1.5);
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+
+    &__header-content {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
   }
 
   &--has-no-error {
@@ -19,14 +29,6 @@
     gap: base(0.5);
   }
 
-  &__header {
-    h3 {
-      margin-bottom: 0;
-    }
-
-    margin-bottom: base(1);
-  }
-
   &__header-wrap {
     display: flex;
     align-items: flex-end;
@@ -52,10 +54,6 @@
     }
   }
 
-  &__row {
-    margin-bottom: base(0.5);
-  }
-
   &__error-wrap {
     position: relative;
   }
@@ -67,16 +65,23 @@
     pointer-events: none;
   }
 
-  &__add-button-wrap {
-    margin-top: base(1);
+  &__draggable-rows {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+  }
 
-    .btn {
-      color: var(--theme-elevation-400);
-      margin: 0;
+  &__title {
+    margin-bottom: 0;
+  }
 
-      &:hover {
-        color: var(--theme-elevation-800);
-      }
+  &__add-row {
+    align-self: flex-start;
+    color: var(--theme-elevation-400);
+    margin: 0;
+
+    &:hover {
+      color: var(--theme-elevation-800);
     }
   }
 }
diff --git a/packages/payload/src/admin/components/forms/field-types/Array/index.tsx b/packages/payload/src/admin/components/forms/field-types/Array/index.tsx
index 378d173fc3..0853152300 100644
--- a/packages/payload/src/admin/components/forms/field-types/Array/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Array/index.tsx
@@ -22,6 +22,7 @@ import useField from '../../useField'
 import withCondition from '../../withCondition'
 import { ArrayRow } from './ArrayRow'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'array-field'
 
@@ -152,54 +153,62 @@ const ArrayFieldType: React.FC<Props> = (props) => {
   )
 
   const hasMaxRows = maxRows && rows.length >= maxRows
+
   const fieldErrorCount =
     rows.reduce((total, row) => total + (row?.childErrorPaths?.size || 0), 0) + (valid ? 0 : 1)
+
   const fieldHasErrors = submitted && fieldErrorCount > 0
 
-  const classes = [
-    'field-type',
-    baseClass,
-    className,
-    fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,
-  ]
-    .filter(Boolean)
-    .join(' ')
+  const showRequired = readOnly && rows.length === 0
+  const showMinRows = rows.length < minRows || (required && rows.length === 0)
 
   return (
-    <div className={classes} id={`field-${path.replace(/\./g, '__')}`}>
-      <div className={`${baseClass}__error-wrap`}>
-        <Error message={errorMessage} showError={showError} />
-      </div>
+    <div
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      id={`field-${path.replace(/\./g, '__')}`}
+    >
+      {showError && (
+        <div className={`${baseClass}__error-wrap`}>
+          <Error message={errorMessage} showError={showError} />
+        </div>
+      )}
       <header className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__header-content`}>
-            <h3>{getTranslation(label || name, i18n)}</h3>
+            <h3 className={`${baseClass}__title`}>{getTranslation(label || name, i18n)}</h3>
             {fieldHasErrors && fieldErrorCount > 0 && (
               <ErrorPill count={fieldErrorCount} withMessage />
             )}
           </div>
-
-          <ul className={`${baseClass}__header-actions`}>
-            <li>
-              <button
-                className={`${baseClass}__header-action`}
-                onClick={() => toggleCollapseAll(true)}
-                type="button"
-              >
-                {t('collapseAll')}
-              </button>
-            </li>
-
-            <li>
-              <button
-                className={`${baseClass}__header-action`}
-                onClick={() => toggleCollapseAll(false)}
-                type="button"
-              >
-                {t('showAll')}
-              </button>
-            </li>
-          </ul>
+          {rows.length > 0 && (
+            <ul className={`${baseClass}__header-actions`}>
+              <li>
+                <button
+                  className={`${baseClass}__header-action`}
+                  onClick={() => toggleCollapseAll(true)}
+                  type="button"
+                >
+                  {t('collapseAll')}
+                </button>
+              </li>
+              <li>
+                <button
+                  className={`${baseClass}__header-action`}
+                  onClick={() => toggleCollapseAll(false)}
+                  type="button"
+                >
+                  {t('showAll')}
+                </button>
+              </li>
+            </ul>
+          )}
         </div>
         <FieldDescription
           className={`field-description-${path.replace(/\./g, '__')}`}
@@ -209,14 +218,13 @@ const ArrayFieldType: React.FC<Props> = (props) => {
       </header>
 
       <NullifyLocaleField fieldValue={value} localized={localized} path={path} />
-
-      <DraggableSortable
-        className={`${baseClass}__draggable-rows`}
-        ids={rows.map((row) => row.id)}
-        onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}
-      >
-        {rows.length > 0 &&
-          rows.map((row, i) => (
+      {(rows.length > 0 || (!valid && (showRequired || showMinRows))) && (
+        <DraggableSortable
+          className={`${baseClass}__draggable-rows`}
+          ids={rows.map((row) => row.id)}
+          onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}
+        >
+          {rows.map((row, i) => (
             <DraggableSortableItem disabled={readOnly} id={row.id} key={row.id}>
               {(draggableSortableItemProps) => (
                 <ArrayRow
@@ -242,41 +250,38 @@ const ArrayFieldType: React.FC<Props> = (props) => {
               )}
             </DraggableSortableItem>
           ))}
-
-        {!valid && (
-          <React.Fragment>
-            {readOnly && rows.length === 0 && (
-              <Banner>
-                {t('validation:fieldHasNo', { label: getTranslation(labels.plural, i18n) })}
-              </Banner>
-            )}
-
-            {(rows.length < minRows || (required && rows.length === 0)) && (
-              <Banner type="error">
-                {t('validation:requiresAtLeast', {
-                  count: minRows,
-                  label:
-                    getTranslation(minRows ? labels.plural : labels.singular, i18n) ||
-                    t(minRows > 1 ? 'general:row' : 'general:rows'),
-                })}
-              </Banner>
-            )}
-          </React.Fragment>
-        )}
-      </DraggableSortable>
-
+          {!valid && (
+            <React.Fragment>
+              {showRequired && (
+                <Banner>
+                  {t('validation:fieldHasNo', { label: getTranslation(labels.plural, i18n) })}
+                </Banner>
+              )}
+              {showMinRows && (
+                <Banner type="error">
+                  {t('validation:requiresAtLeast', {
+                    count: minRows,
+                    label:
+                      getTranslation(minRows ? labels.plural : labels.singular, i18n) ||
+                      t(minRows > 1 ? 'general:row' : 'general:rows'),
+                  })}
+                </Banner>
+              )}
+            </React.Fragment>
+          )}
+        </DraggableSortable>
+      )}
       {!readOnly && !hasMaxRows && (
-        <div className={`${baseClass}__add-button-wrap`}>
-          <Button
-            buttonStyle="icon-label"
-            icon="plus"
-            iconPosition="left"
-            iconStyle="with-border"
-            onClick={() => addRow(value)}
-          >
-            {t('addLabel', { label: getTranslation(labels.singular, i18n) })}
-          </Button>
-        </div>
+        <Button
+          buttonStyle="icon-label"
+          icon="plus"
+          iconPosition="left"
+          iconStyle="with-border"
+          onClick={() => addRow(value)}
+          className={`${baseClass}__add-row`}
+        >
+          {t('addLabel', { label: getTranslation(labels.singular, i18n) })}
+        </Button>
       )}
     </div>
   )
diff --git a/packages/payload/src/admin/components/forms/field-types/Blocks/BlockRow.tsx b/packages/payload/src/admin/components/forms/field-types/Blocks/BlockRow.tsx
index 9de78361a8..e1aae61137 100644
--- a/packages/payload/src/admin/components/forms/field-types/Blocks/BlockRow.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Blocks/BlockRow.tsx
@@ -133,6 +133,7 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
           indexPath={indexPath}
           permissions={permissions?.blocks?.[row.blockType]?.fields}
           readOnly={readOnly}
+          margins="small"
         />
       </Collapsible>
     </div>
diff --git a/packages/payload/src/admin/components/forms/field-types/Blocks/index.scss b/packages/payload/src/admin/components/forms/field-types/Blocks/index.scss
index 01730d10b5..b53bca9a0b 100644
--- a/packages/payload/src/admin/components/forms/field-types/Blocks/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Blocks/index.scss
@@ -1,14 +1,14 @@
 @import '../../../../scss/styles.scss';
 
 .blocks-field {
-  margin: 0 0 base(2);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base) / 2);
 
   &__header {
     h3 {
-      margin-bottom: 0;
+      margin: 0;
     }
-
-    margin-bottom: base(1);
   }
 
   &__header-wrap {
@@ -75,19 +75,22 @@
     line-height: unset;
   }
 
-  &__row {
-    margin-bottom: base(0.5);
-  }
-
   &__error-wrap {
     position: relative;
   }
 
+  &__rows {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+  }
+
   &__drawer-toggler {
     background-color: transparent;
     margin: 0;
     padding: 0;
     border: none;
+    align-self: flex-start;
 
     .btn {
       color: var(--theme-elevation-400);
diff --git a/packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx b/packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx
index c90d0a5a4e..5c39303979 100644
--- a/packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx
@@ -25,6 +25,7 @@ import withCondition from '../../withCondition'
 import { BlockRow } from './BlockRow'
 import { BlocksDrawer } from './BlocksDrawer'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'blocks-field'
 
@@ -161,20 +162,26 @@ const BlocksField: React.FC<Props> = (props) => {
   const fieldErrorCount = rows.reduce((total, row) => total + (row?.childErrorPaths?.size || 0), 0)
   const fieldHasErrors = submitted && fieldErrorCount + (valid ? 0 : 1) > 0
 
-  const classes = [
-    'field-type',
-    baseClass,
-    className,
-    fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,
-  ]
-    .filter(Boolean)
-    .join(' ')
+  const showMinRows = rows.length < minRows || (required && rows.length === 0)
+  const showRequired = readOnly && rows.length === 0
 
   return (
-    <div className={classes} id={`field-${path.replace(/\./g, '__')}`}>
-      <div className={`${baseClass}__error-wrap`}>
-        <Error message={errorMessage} showError={showError} />
-      </div>
+    <div
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      id={`field-${path.replace(/\./g, '__')}`}
+    >
+      {showError && (
+        <div className={`${baseClass}__error-wrap`}>
+          <Error message={errorMessage} showError={showError} />
+        </div>
+      )}
       <header className={`${baseClass}__header`}>
         <div className={`${baseClass}__header-wrap`}>
           <div className={`${baseClass}__heading-with-error`}>
@@ -184,38 +191,39 @@ const BlocksField: React.FC<Props> = (props) => {
               <ErrorPill count={fieldErrorCount} withMessage />
             )}
           </div>
-          <ul className={`${baseClass}__header-actions`}>
-            <li>
-              <button
-                className={`${baseClass}__header-action`}
-                onClick={() => toggleCollapseAll(true)}
-                type="button"
-              >
-                {t('collapseAll')}
-              </button>
-            </li>
-            <li>
-              <button
-                className={`${baseClass}__header-action`}
-                onClick={() => toggleCollapseAll(false)}
-                type="button"
-              >
-                {t('showAll')}
-              </button>
-            </li>
-          </ul>
+          {rows.length > 0 && (
+            <ul className={`${baseClass}__header-actions`}>
+              <li>
+                <button
+                  className={`${baseClass}__header-action`}
+                  onClick={() => toggleCollapseAll(true)}
+                  type="button"
+                >
+                  {t('collapseAll')}
+                </button>
+              </li>
+              <li>
+                <button
+                  className={`${baseClass}__header-action`}
+                  onClick={() => toggleCollapseAll(false)}
+                  type="button"
+                >
+                  {t('showAll')}
+                </button>
+              </li>
+            </ul>
+          )}
         </div>
         <FieldDescription description={description} value={value} />
       </header>
-
       <NullifyLocaleField fieldValue={value} localized={localized} path={path} />
-
-      <DraggableSortable
-        ids={rows.map((row) => row.id)}
-        onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}
-      >
-        {rows.length > 0 &&
-          rows.map((row, i) => {
+      {(rows.length > 0 || (!valid && (showRequired || showMinRows))) && (
+        <DraggableSortable
+          className={`${baseClass}__rows`}
+          ids={rows.map((row) => row.id)}
+          onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}
+        >
+          {rows.map((row, i) => {
             const { blockType } = row
             const blockToRender = blocks.find((block) => block.slug === blockType)
 
@@ -250,29 +258,30 @@ const BlocksField: React.FC<Props> = (props) => {
 
             return null
           })}
-        {!editingDefaultLocale && (
-          <React.Fragment>
-            {(rows.length < minRows || (required && rows.length === 0)) && (
-              <Banner type="error">
-                {t('validation:requiresAtLeast', {
-                  count: minRows,
-                  label: getTranslation(
-                    minRows === 1 || typeof minRows === 'undefined'
-                      ? labels.singular
-                      : labels.plural,
-                    i18n,
-                  ),
-                })}
-              </Banner>
-            )}
-            {rows.length === 0 && readOnly && (
-              <Banner>
-                {t('validation:fieldHasNo', { label: getTranslation(labels.plural, i18n) })}
-              </Banner>
-            )}
-          </React.Fragment>
-        )}
-      </DraggableSortable>
+          {!editingDefaultLocale && (
+            <React.Fragment>
+              {showMinRows && (
+                <Banner type="error">
+                  {t('validation:requiresAtLeast', {
+                    count: minRows,
+                    label: getTranslation(
+                      minRows === 1 || typeof minRows === 'undefined'
+                        ? labels.singular
+                        : labels.plural,
+                      i18n,
+                    ),
+                  })}
+                </Banner>
+              )}
+              {showRequired && (
+                <Banner>
+                  {t('validation:fieldHasNo', { label: getTranslation(labels.plural, i18n) })}
+                </Banner>
+              )}
+            </React.Fragment>
+          )}
+        </DraggableSortable>
+      )}
       {!readOnly && !hasMaxRows && (
         <Fragment>
           <DrawerToggler className={`${baseClass}__drawer-toggler`} slug={drawerSlug}>
diff --git a/packages/payload/src/admin/components/forms/field-types/Checkbox/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Checkbox/Input.tsx
index dfca9eed34..7f3e5249d1 100644
--- a/packages/payload/src/admin/components/forms/field-types/Checkbox/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Checkbox/Input.tsx
@@ -5,7 +5,7 @@ import Line from '../../../icons/Line'
 import Label from '../../Label'
 import './index.scss'
 
-const baseClass = 'custom-checkbox'
+const baseClass = 'checkbox-input'
 
 type CheckboxInputProps = {
   'aria-label'?: string
@@ -18,6 +18,7 @@ type CheckboxInputProps = {
   partialChecked?: boolean
   readOnly?: boolean
   required?: boolean
+  className?: string
 }
 
 export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
@@ -32,12 +33,14 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = (props) => {
     partialChecked,
     readOnly,
     required,
+    className,
   } = props
 
   return (
     <div
       className={[
         baseClass,
+        className,
         (checked || partialChecked) && `${baseClass}--checked`,
         readOnly && `${baseClass}--read-only`,
       ]
diff --git a/packages/payload/src/admin/components/forms/field-types/Checkbox/index.scss b/packages/payload/src/admin/components/forms/field-types/Checkbox/index.scss
index a19d91b0b1..6f73104c48 100644
--- a/packages/payload/src/admin/components/forms/field-types/Checkbox/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Checkbox/index.scss
@@ -16,13 +16,14 @@
   }
 }
 
-.custom-checkbox {
+.checkbox-input {
   display: inline-flex;
 
   label {
     padding-bottom: 0;
     padding-left: base(0.5);
   }
+
   [dir='rtl'] &__input {
     margin-right: 0;
     margin-left: base(0.5);
@@ -65,7 +66,7 @@
     &:active,
     &:focus-within,
     &:focus {
-      .custom-checkbox__input,
+      .checkbox-input__input,
       & input[type='checkbox'] {
         @include inputShadowActive;
 
@@ -76,7 +77,7 @@
     }
 
     &:hover {
-      .custom-checkbox__input,
+      .checkbox-input__input,
       & input[type='checkbox'] {
         border-color: var(--theme-elevation-250);
       }
@@ -94,7 +95,7 @@
   }
 
   &--checked {
-    .custom-checkbox__icon {
+    .checkbox-input__icon {
       svg {
         opacity: 1;
       }
@@ -102,7 +103,7 @@
   }
 
   &--read-only {
-    .custom-checkbox__input {
+    .checkbox-input__input {
       background-color: var(--theme-elevation-100);
     }
 
@@ -115,7 +116,7 @@
 html[data-theme='light'] {
   .checkbox {
     &.error {
-      .custom-checkbox__input {
+      .checkbox-input__input {
         @include lightInputError;
       }
     }
@@ -125,7 +126,7 @@ html[data-theme='light'] {
 html[data-theme='dark'] {
   .checkbox {
     &.error {
-      .custom-checkbox__input {
+      .checkbox-input__input {
         @include darkInputError;
       }
     }
diff --git a/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx b/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx
index b43ddd63e7..b996982dfe 100644
--- a/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx
@@ -11,6 +11,7 @@ import useField from '../../useField'
 import withCondition from '../../withCondition'
 import { CheckboxInput } from './Input'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'checkbox'
 
@@ -56,7 +57,7 @@ const Checkbox: React.FC<Props> = (props) => {
   return (
     <div
       className={[
-        'field-type',
+        fieldBaseClass,
         baseClass,
         showError && 'error',
         className,
diff --git a/packages/payload/src/admin/components/forms/field-types/Code/index.scss b/packages/payload/src/admin/components/forms/field-types/Code/index.scss
index e9d4428a6d..47a80e7757 100644
--- a/packages/payload/src/admin/components/forms/field-types/Code/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Code/index.scss
@@ -2,7 +2,6 @@
 
 .code-field {
   position: relative;
-  margin-bottom: $baseline;
 
   &.error {
     textarea {
diff --git a/packages/payload/src/admin/components/forms/field-types/Code/index.tsx b/packages/payload/src/admin/components/forms/field-types/Code/index.tsx
index 501c57328f..e1d484eb52 100644
--- a/packages/payload/src/admin/components/forms/field-types/Code/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Code/index.tsx
@@ -10,6 +10,7 @@ import Label from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const prismToMonacoLanguageMap = {
   js: 'javascript',
@@ -52,19 +53,17 @@ const Code: React.FC<Props> = (props) => {
     validate: memoizedValidate,
   })
 
-  const classes = [
-    baseClass,
-    'field-type',
-    className,
-    showError && 'error',
-    readOnly && 'read-only',
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Collapsible/index.scss b/packages/payload/src/admin/components/forms/field-types/Collapsible/index.scss
index 9c52ecb446..458e40a685 100644
--- a/packages/payload/src/admin/components/forms/field-types/Collapsible/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Collapsible/index.scss
@@ -1,8 +1,6 @@
 @import '../../../../scss/styles.scss';
 
 .collapsible-field {
-  margin: 0 0 base(2);
-
   &__row-label-wrap {
     pointer-events: none;
     display: flex;
diff --git a/packages/payload/src/admin/components/forms/field-types/Collapsible/index.tsx b/packages/payload/src/admin/components/forms/field-types/Collapsible/index.tsx
index 1f28bf8a45..cf378870bc 100644
--- a/packages/payload/src/admin/components/forms/field-types/Collapsible/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Collapsible/index.tsx
@@ -15,6 +15,7 @@ import { RowLabel } from '../../RowLabel'
 import { WatchChildErrors } from '../../WatchChildErrors'
 import withCondition from '../../withCondition'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'collapsible-field'
 
@@ -86,20 +87,21 @@ const CollapsibleField: React.FC<Props> = (props) => {
 
   const fieldHasErrors = submitted && errorCount > 0
 
-  const classes = [
-    'field-type',
-    baseClass,
-    className,
-    fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   return (
-    <div id={`field-${fieldPreferencesKey}${path ? `-${path.replace(/\./g, '__')}` : ''}`}>
+    <div
+      id={`field-${fieldPreferencesKey}${path ? `-${path.replace(/\./g, '__')}` : ''}`}
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
       <WatchChildErrors fieldSchema={fields} path={path} setErrorCount={setErrorCount} />
       <Collapsible
-        className={classes}
+        className={`${baseClass}__collapsible`}
         collapsibleStyle={errorCount > 0 ? 'error' : 'default'}
         header={
           <div className={`${baseClass}__row-label-wrap`}>
@@ -118,6 +120,7 @@ const CollapsibleField: React.FC<Props> = (props) => {
           fieldTypes={fieldTypes}
           forceRender
           indexPath={indexPath}
+          margins="small"
           permissions={permissions}
           readOnly={readOnly}
         />
diff --git a/packages/payload/src/admin/components/forms/field-types/ConfirmPassword/index.scss b/packages/payload/src/admin/components/forms/field-types/ConfirmPassword/index.scss
index b376fe49e4..157c138b92 100644
--- a/packages/payload/src/admin/components/forms/field-types/ConfirmPassword/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/ConfirmPassword/index.scss
@@ -2,7 +2,6 @@
 
 .field-type.confirm-password {
   position: relative;
-  margin-bottom: $baseline;
 
   input {
     @include formInput;
diff --git a/packages/payload/src/admin/components/forms/field-types/ConfirmPassword/index.tsx b/packages/payload/src/admin/components/forms/field-types/ConfirmPassword/index.tsx
index c7d4882dfc..c493f38455 100644
--- a/packages/payload/src/admin/components/forms/field-types/ConfirmPassword/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/ConfirmPassword/index.tsx
@@ -9,6 +9,7 @@ import { useFormFields } from '../../Form/context'
 import Label from '../../Label'
 import useField from '../../useField'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const ConfirmPassword: React.FC<Props> = (props) => {
   const { disabled } = props
@@ -37,10 +38,12 @@ const ConfirmPassword: React.FC<Props> = (props) => {
     validate,
   })
 
-  const classes = ['field-type', 'confirm-password', showError && 'error'].filter(Boolean).join(' ')
-
   return (
-    <div className={classes}>
+    <div
+      className={[fieldBaseClass, 'confirm-password', showError && 'error']
+        .filter(Boolean)
+        .join(' ')}
+    >
       <Error message={errorMessage} showError={showError} />
       <Label
         htmlFor="field-confirm-password"
diff --git a/packages/payload/src/admin/components/forms/field-types/DateTime/index.scss b/packages/payload/src/admin/components/forms/field-types/DateTime/index.scss
index 14f5bb556c..559fe312bc 100644
--- a/packages/payload/src/admin/components/forms/field-types/DateTime/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/DateTime/index.scss
@@ -1,8 +1,6 @@
 @import '../../../../scss/styles';
 
 .date-time-field {
-  margin-bottom: $baseline;
-
   &__error-wrap {
     position: relative;
   }
diff --git a/packages/payload/src/admin/components/forms/field-types/DateTime/index.tsx b/packages/payload/src/admin/components/forms/field-types/DateTime/index.tsx
index cb5e46f55b..ae3203bcfd 100644
--- a/packages/payload/src/admin/components/forms/field-types/DateTime/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/DateTime/index.tsx
@@ -12,6 +12,7 @@ import Label from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'date-time-field'
 
@@ -42,19 +43,17 @@ const DateTime: React.FC<Props> = (props) => {
     validate: memoizedValidate,
   })
 
-  const classes = [
-    'field-type',
-    baseClass,
-    className,
-    showError && `${baseClass}--has-error`,
-    readOnly && 'read-only',
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && `${baseClass}--has-error`,
+        readOnly && 'read-only',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Email/index.scss b/packages/payload/src/admin/components/forms/field-types/Email/index.scss
index 3ac71bee86..5eb92db146 100644
--- a/packages/payload/src/admin/components/forms/field-types/Email/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Email/index.scss
@@ -1,7 +1,6 @@
 @import '../../../../scss/styles.scss';
 
 .field-type.email {
-  margin-bottom: $baseline;
   position: relative;
 
   input {
diff --git a/packages/payload/src/admin/components/forms/field-types/Email/index.tsx b/packages/payload/src/admin/components/forms/field-types/Email/index.tsx
index ff3045fa58..fc2b02f72b 100644
--- a/packages/payload/src/admin/components/forms/field-types/Email/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Email/index.tsx
@@ -11,6 +11,7 @@ import Label from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const Email: React.FC<Props> = (props) => {
   const {
@@ -50,13 +51,11 @@ const Email: React.FC<Props> = (props) => {
 
   const { errorMessage, setValue, showError, value } = fieldType
 
-  const classes = ['field-type', 'email', className, showError && 'error', readOnly && 'read-only']
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[fieldBaseClass, 'email', className, showError && 'error', readOnly && 'read-only']
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Group/index.scss b/packages/payload/src/admin/components/forms/field-types/Group/index.scss
index effc5da595..12d25e85e5 100644
--- a/packages/payload/src/admin/components/forms/field-types/Group/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Group/index.scss
@@ -1,14 +1,24 @@
 @import '../../../../scss/styles.scss';
 
 .group-field {
-  margin: base(2) calc(var(--gutter-h) * -1);
-  padding: base(2) var(--gutter-h);
-  border-top: 1px solid var(--theme-elevation-100);
+  margin-left: calc(var(--gutter-h) * -1);
+  margin-right: calc(var(--gutter-h) * -1);
   border-bottom: 1px solid var(--theme-elevation-100);
+  border-top: 1px solid var(--theme-elevation-100);
+
+  &--top-level {
+    padding: base(2) var(--gutter-h);
+
+    &:first-child {
+      padding-top: 0;
+      border-top: 0;
+    }
+  }
 
   &--within-collapsible {
-    margin: $baseline calc(#{$baseline} * -1);
-    padding: $baseline;
+    margin-left: calc(var(--base) * -1);
+    margin-right: calc(var(--base) * -1);
+    padding: var(--base);
 
     &:first-child {
       border-top: 0;
@@ -54,10 +64,16 @@
   }
 
   &__header {
-    margin-bottom: base(0.75);
+    margin-bottom: calc(var(--base) / 2);
     display: flex;
     align-items: center;
     gap: base(0.5);
+
+    > header {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
   }
 
   &__title {
@@ -65,8 +81,18 @@
   }
 
   @include small-break {
-    padding-top: $baseline;
-    padding-bottom: $baseline;
+    &--top-level {
+      padding: var(--base) var(--gutter-h);
+
+      &:first-child {
+        padding-top: 0;
+        border-top: 0;
+      }
+    }
+
+    &__header {
+      margin-bottom: calc(var(--base) / 2);
+    }
 
     &--within-collapsible {
       margin-left: calc(var(--gutter-h) * -1);
@@ -84,12 +110,8 @@
 }
 
 .group-field + .group-field {
-  margin-top: base(-2);
   border-top: 0;
-}
-
-.group-field--within-collapsible + .group-field--within-collapsible {
-  margin-top: base(-1);
+  padding-top: 0;
 }
 
 .group-field--within-row + .group-field--within-row {
diff --git a/packages/payload/src/admin/components/forms/field-types/Group/index.tsx b/packages/payload/src/admin/components/forms/field-types/Group/index.tsx
index ef8274c84e..ef8381b8f4 100644
--- a/packages/payload/src/admin/components/forms/field-types/Group/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Group/index.tsx
@@ -16,6 +16,7 @@ import { useRow } from '../Row/provider'
 import { useTabs } from '../Tabs/provider'
 import './index.scss'
 import { GroupProvider, useGroup } from './provider'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'group-field'
 
@@ -41,12 +42,14 @@ const Group: React.FC<Props> = (props) => {
   const groupHasErrors = submitted && errorCount > 0
 
   const path = pathFromProps || name
+  const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)
 
   return (
     <div
       className={[
-        'field-type',
+        fieldBaseClass,
         baseClass,
+        isTopLevel && `${baseClass}--top-level`,
         isWithinCollapsible && `${baseClass}--within-collapsible`,
         isWithinGroup && `${baseClass}--within-group`,
         isWithinRow && `${baseClass}--within-row`,
@@ -86,6 +89,7 @@ const Group: React.FC<Props> = (props) => {
             }))}
             fieldTypes={fieldTypes}
             indexPath={indexPath}
+            margins="small"
             permissions={permissions?.fields}
             readOnly={readOnly}
           />
diff --git a/packages/payload/src/admin/components/forms/field-types/JSON/index.scss b/packages/payload/src/admin/components/forms/field-types/JSON/index.scss
index 181ce625b8..035e99b12a 100644
--- a/packages/payload/src/admin/components/forms/field-types/JSON/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/JSON/index.scss
@@ -2,7 +2,6 @@
 
 .json-field {
   position: relative;
-  margin-bottom: $baseline;
 }
 
 html[data-theme='light'] {
diff --git a/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx b/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx
index aa2efd9274..20b2d8625c 100644
--- a/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx
@@ -10,6 +10,7 @@ import Label from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'json-field'
 
@@ -59,19 +60,17 @@ const JSONField: React.FC<Props> = (props) => {
     setStringValue(JSON.stringify(initialValue, null, 2))
   }, [initialValue])
 
-  const classes = [
-    baseClass,
-    'field-type',
-    className,
-    showError && 'error',
-    readOnly && 'read-only',
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Number/index.scss b/packages/payload/src/admin/components/forms/field-types/Number/index.scss
index 8220e10ac8..f1a9f4ac8d 100644
--- a/packages/payload/src/admin/components/forms/field-types/Number/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Number/index.scss
@@ -2,7 +2,6 @@
 
 .field-type.number {
   position: relative;
-  margin-bottom: $baseline;
 
   &:not(.has-many) {
     input {
diff --git a/packages/payload/src/admin/components/forms/field-types/Number/index.tsx b/packages/payload/src/admin/components/forms/field-types/Number/index.tsx
index 9d1685fb5d..a22fb591dd 100644
--- a/packages/payload/src/admin/components/forms/field-types/Number/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Number/index.tsx
@@ -14,6 +14,7 @@ import Label from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const NumberField: React.FC<Props> = (props) => {
   const {
@@ -60,17 +61,6 @@ const NumberField: React.FC<Props> = (props) => {
     [setValue],
   )
 
-  const classes = [
-    'field-type',
-    'number',
-    className,
-    showError && 'error',
-    readOnly && 'read-only',
-    hasMany && 'has-many',
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   const [valueToRender, setValueToRender] = useState<
     { id: string; label: string; value: { value: number } }[]
   >([]) // Only for hasMany
@@ -113,7 +103,16 @@ const NumberField: React.FC<Props> = (props) => {
 
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        'number',
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+        hasMany && 'has-many',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Password/index.scss b/packages/payload/src/admin/components/forms/field-types/Password/index.scss
index 8a85d10a59..33c483c91d 100644
--- a/packages/payload/src/admin/components/forms/field-types/Password/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Password/index.scss
@@ -2,7 +2,6 @@
 
 .field-type.password {
   position: relative;
-  margin-bottom: $baseline;
 
   input {
     @include formInput;
diff --git a/packages/payload/src/admin/components/forms/field-types/Password/index.tsx b/packages/payload/src/admin/components/forms/field-types/Password/index.tsx
index dbfcec16de..9507a9b19f 100644
--- a/packages/payload/src/admin/components/forms/field-types/Password/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Password/index.tsx
@@ -8,6 +8,7 @@ import Label from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const Password: React.FC<Props> = (props) => {
   const {
@@ -38,13 +39,11 @@ const Password: React.FC<Props> = (props) => {
     validate: memoizedValidate,
   })
 
-  const classes = ['field-type', 'password', className, showError && 'error']
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[fieldBaseClass, 'password', className, showError && 'error']
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Point/index.scss b/packages/payload/src/admin/components/forms/field-types/Point/index.scss
index 01095a16a6..06f74ec531 100644
--- a/packages/payload/src/admin/components/forms/field-types/Point/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Point/index.scss
@@ -2,11 +2,11 @@
 
 .point {
   position: relative;
-  margin-bottom: $baseline;
 
   &__wrap {
     display: flex;
     width: calc(100% + #{base(1)});
+    margin: 0;
     margin-left: base(-0.5);
     margin-right: base(-0.5);
     list-style: none;
diff --git a/packages/payload/src/admin/components/forms/field-types/Point/index.tsx b/packages/payload/src/admin/components/forms/field-types/Point/index.tsx
index f9b5510488..0edb99202c 100644
--- a/packages/payload/src/admin/components/forms/field-types/Point/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Point/index.tsx
@@ -11,6 +11,7 @@ import Label from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'point'
 
@@ -59,19 +60,17 @@ const PointField: React.FC<Props> = (props) => {
     [setValue, value],
   )
 
-  const classes = [
-    'field-type',
-    baseClass,
-    className,
-    showError && 'error',
-    readOnly && 'read-only',
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx b/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx
index 216b711aa9..2216e38626 100644
--- a/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx
@@ -10,6 +10,7 @@ import FieldDescription from '../../FieldDescription'
 import Label from '../../Label'
 import RadioInput from './RadioInput'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'radio-group'
 
@@ -50,20 +51,18 @@ const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
 
   const path = pathFromProps || name
 
-  const classes = [
-    'field-type',
-    baseClass,
-    className,
-    `${baseClass}--layout-${layout}`,
-    showError && 'error',
-    readOnly && `${baseClass}--read-only`,
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        `${baseClass}--layout-${layout}`,
+        showError && 'error',
+        readOnly && `${baseClass}--read-only`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.scss b/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.scss
index 54dd21d010..d39313806b 100644
--- a/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/RadioGroup/index.scss
@@ -1,8 +1,6 @@
 @import '../../../../scss/styles.scss';
 
 .radio-group {
-  margin-bottom: $baseline;
-
   &__error-wrap {
     position: relative;
   }
diff --git a/packages/payload/src/admin/components/forms/field-types/Relationship/index.scss b/packages/payload/src/admin/components/forms/field-types/Relationship/index.scss
index f5e694da77..902df20342 100644
--- a/packages/payload/src/admin/components/forms/field-types/Relationship/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Relationship/index.scss
@@ -2,7 +2,6 @@
 
 .field-type.relationship {
   position: relative;
-  margin-bottom: $baseline;
 }
 
 .relationship {
diff --git a/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx b/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx
index 180db85ef9..adba3891af 100644
--- a/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx
@@ -28,6 +28,7 @@ import './index.scss'
 import optionsReducer from './optionsReducer'
 import { MultiValueLabel } from './select-components/MultiValueLabel'
 import { SingleValue } from './select-components/SingleValue'
+import { fieldBaseClass } from '../shared'
 
 const maxResultsPerRequest = 10
 
@@ -389,23 +390,21 @@ const Relationship: React.FC<Props> = (props) => {
     return r.test(string.slice(-breakApartThreshold))
   }, [])
 
-  const classes = [
-    'field-type',
-    baseClass,
-    className,
-    showError && 'error',
-    errorLoading && 'error-loading',
-    readOnly && `${baseClass}--read-only`,
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   const valueToRender = findOptionsByValue({ options, value })
   if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') valueToRender.value = null
 
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && 'error',
+        errorLoading && 'error-loading',
+        readOnly && `${baseClass}--read-only`,
+      ]
+        .filter(Boolean)
+        .join(' ')}
       id={`field-${pathOrName.replace(/\./g, '__')}`}
       style={{
         ...style,
diff --git a/packages/payload/src/admin/components/forms/field-types/Row/index.scss b/packages/payload/src/admin/components/forms/field-types/Row/index.scss
index f97f36211b..8273051245 100644
--- a/packages/payload/src/admin/components/forms/field-types/Row/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Row/index.scss
@@ -3,29 +3,18 @@
 .field-type.row {
   display: flex;
   flex-wrap: wrap;
-  margin-left: - base(0.5);
-  margin-right: - base(0.5);
-  width: calc(100% + #{$baseline});
-  margin-bottom: 0;
+  width: 100%;
+  gap: var(--base);
 
   > * {
-    padding-left: base(0.5);
-    padding-right: base(0.5);
     flex-grow: 1;
   }
 
   @include mid-break {
-    display: block;
-    margin-left: 0;
-    margin-right: 0;
-    width: 100%;
+    flex-direction: column;
 
     > * {
-      margin-left: 0;
-      margin-right: 0;
       width: 100% !important;
-      padding-left: 0;
-      padding-right: 0;
     }
   }
 }
diff --git a/packages/payload/src/admin/components/forms/field-types/Row/index.tsx b/packages/payload/src/admin/components/forms/field-types/Row/index.tsx
index 4380f45195..3e11694e0c 100644
--- a/packages/payload/src/admin/components/forms/field-types/Row/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Row/index.tsx
@@ -7,6 +7,7 @@ import RenderFields from '../../RenderFields'
 import withCondition from '../../withCondition'
 import './index.scss'
 import { RowProvider } from './provider'
+import { fieldBaseClass } from '../shared'
 
 const Row: React.FC<Props> = (props) => {
   const {
@@ -18,18 +19,17 @@ const Row: React.FC<Props> = (props) => {
     permissions,
   } = props
 
-  const classes = ['field-type', 'row', className].filter(Boolean).join(' ')
-
   return (
     <RowProvider>
       <RenderFields
-        className={classes}
+        className={[fieldBaseClass, 'row', className].filter(Boolean).join(' ')}
         fieldSchema={fields.map((field) => ({
           ...field,
           path: createNestedFieldPath(path, field),
         }))}
         fieldTypes={fieldTypes}
         indexPath={indexPath}
+        margins={false}
         permissions={permissions}
         readOnly={readOnly}
       />
diff --git a/packages/payload/src/admin/components/forms/field-types/Select/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Select/Input.tsx
index 653636a362..4cc4d982ad 100644
--- a/packages/payload/src/admin/components/forms/field-types/Select/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Select/Input.tsx
@@ -11,6 +11,7 @@ import Error from '../../Error'
 import FieldDescription from '../../FieldDescription'
 import Label from '../../Label'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 export type SelectInputProps = Omit<SelectField, 'options' | 'type' | 'value'> & {
   className?: string
@@ -52,10 +53,6 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
 
   const { i18n } = useTranslation()
 
-  const classes = ['field-type', 'select', className, showError && 'error', readOnly && 'read-only']
-    .filter(Boolean)
-    .join(' ')
-
   let valueToRender
 
   if (hasMany && Array.isArray(value)) {
@@ -76,7 +73,15 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
 
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        'select',
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       id={`field-${path.replace(/\./g, '__')}`}
       style={{
         ...style,
diff --git a/packages/payload/src/admin/components/forms/field-types/Select/index.scss b/packages/payload/src/admin/components/forms/field-types/Select/index.scss
index 1ef8ab92bc..139f9b79e8 100644
--- a/packages/payload/src/admin/components/forms/field-types/Select/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Select/index.scss
@@ -2,7 +2,6 @@
 
 .field-type.select {
   position: relative;
-  margin-bottom: $baseline;
 }
 
 html[data-theme='light'] {
diff --git a/packages/payload/src/admin/components/forms/field-types/Tabs/index.scss b/packages/payload/src/admin/components/forms/field-types/Tabs/index.scss
index cd717664b7..bcb7e33658 100644
--- a/packages/payload/src/admin/components/forms/field-types/Tabs/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Tabs/index.scss
@@ -4,7 +4,6 @@
   margin-top: base(2);
   margin-left: calc(var(--gutter-h) * -1);
   margin-right: calc(var(--gutter-h) * -1);
-  margin-bottom: base(2);
 
   &__content-wrap {
     padding-left: var(--gutter-h);
@@ -53,7 +52,7 @@
     @extend %btn-reset;
     @extend %h4;
     display: flex;
-    padding-bottom: base(0.75);
+    padding-bottom: base(1);
     margin: 0 $baseline 0 0;
     cursor: pointer;
     opacity: 0.5;
@@ -96,7 +95,7 @@
   }
 
   &__description {
-    margin-bottom: $baseline;
+    margin-bottom: calc(var(--base) / 2);
   }
 
   @include small-break {
@@ -107,6 +106,7 @@
 
     &__tab-button {
       margin: 0 base(0.75) 0 0;
+      padding-bottom: base(0.5);
 
       &:last-child {
         margin: 0;
diff --git a/packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx b/packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx
index 83261db4d1..b3a3e75c3f 100644
--- a/packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx
@@ -20,6 +20,7 @@ import { WatchChildErrors } from '../../WatchChildErrors'
 import withCondition from '../../withCondition'
 import './index.scss'
 import { TabsProvider } from './provider'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'tabs-field'
 
@@ -132,7 +133,12 @@ const TabsField: React.FC<Props> = (props) => {
 
   return (
     <div
-      className={[className, baseClass, isWithinCollapsible && `${baseClass}--within-collapsible`]
+      className={[
+        fieldBaseClass,
+        className,
+        baseClass,
+        isWithinCollapsible && `${baseClass}--within-collapsible`,
+      ]
         .filter(Boolean)
         .join(' ')}
     >
@@ -167,6 +173,7 @@ const TabsField: React.FC<Props> = (props) => {
                 <FieldDescription
                   className={`${baseClass}__description`}
                   description={activeTabConfig.description}
+                  marginPlacement="bottom"
                 />
                 <RenderFields
                   fieldSchema={activeTabConfig.fields.map((field) => {
@@ -184,6 +191,7 @@ const TabsField: React.FC<Props> = (props) => {
                   forceRender
                   indexPath={indexPath}
                   key={String(activeTabConfig.label)}
+                  margins="small"
                   permissions={
                     tabHasName(activeTabConfig)
                       ? permissions[activeTabConfig.name].fields
diff --git a/packages/payload/src/admin/components/forms/field-types/Text/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Text/Input.tsx
index e5d3a4b5fe..c2e3e7536d 100644
--- a/packages/payload/src/admin/components/forms/field-types/Text/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Text/Input.tsx
@@ -11,6 +11,7 @@ import Error from '../../Error'
 import FieldDescription from '../../FieldDescription'
 import Label from '../../Label'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 export type TextInputProps = Omit<TextField, 'type'> & {
   className?: string
@@ -52,13 +53,11 @@ const TextInput: React.FC<TextInputProps> = (props) => {
 
   const { i18n } = useTranslation()
 
-  const classes = ['field-type', 'text', className, showError && 'error', readOnly && 'read-only']
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[fieldBaseClass, 'text', className, showError && 'error', readOnly && 'read-only']
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Text/index.scss b/packages/payload/src/admin/components/forms/field-types/Text/index.scss
index 1e61496e6e..2afaf93b35 100644
--- a/packages/payload/src/admin/components/forms/field-types/Text/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Text/index.scss
@@ -2,7 +2,6 @@
 
 .field-type.text {
   position: relative;
-  margin-bottom: $baseline;
 
   input {
     @include formInput;
diff --git a/packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx
index a41360f017..8c2cd8114f 100644
--- a/packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx
@@ -11,6 +11,7 @@ import Error from '../../Error'
 import FieldDescription from '../../FieldDescription'
 import Label from '../../Label'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 export type TextAreaInputProps = Omit<TextareaField, 'type'> & {
   className?: string
@@ -50,19 +51,17 @@ const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
 
   const { i18n } = useTranslation()
 
-  const classes = [
-    'field-type',
-    'textarea',
-    className,
-    showError && 'error',
-    readOnly && 'read-only',
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        'textarea',
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Textarea/index.scss b/packages/payload/src/admin/components/forms/field-types/Textarea/index.scss
index ba259ff203..be94587917 100644
--- a/packages/payload/src/admin/components/forms/field-types/Textarea/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Textarea/index.scss
@@ -2,7 +2,6 @@
 
 .field-type.textarea {
   position: relative;
-  margin-bottom: $baseline;
   display: flex;
   flex-direction: column;
 
diff --git a/packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx b/packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx
index 466a1f9f8d..0f76d6d0db 100644
--- a/packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx
@@ -19,6 +19,7 @@ import Error from '../../Error'
 import FieldDescription from '../../FieldDescription'
 import Label from '../../Label'
 import './index.scss'
+import { fieldBaseClass } from '../shared'
 
 const baseClass = 'upload'
 
@@ -79,16 +80,6 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
     filterOptions: filterOptionsResult,
   })
 
-  const classes = [
-    'field-type',
-    baseClass,
-    className,
-    showError && 'error',
-    readOnly && 'read-only',
-  ]
-    .filter(Boolean)
-    .join(' ')
-
   useEffect(() => {
     if (typeof value === 'string' && value !== '') {
       const fetchFile = async () => {
@@ -135,7 +126,15 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
 
   return (
     <div
-      className={classes}
+      className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={{
         ...style,
         width,
diff --git a/packages/payload/src/admin/components/forms/field-types/Upload/index.scss b/packages/payload/src/admin/components/forms/field-types/Upload/index.scss
index 350c4bd1fc..9e1cb03e68 100644
--- a/packages/payload/src/admin/components/forms/field-types/Upload/index.scss
+++ b/packages/payload/src/admin/components/forms/field-types/Upload/index.scss
@@ -2,7 +2,6 @@
 
 .upload {
   position: relative;
-  margin-bottom: $baseline;
 
   &__wrap {
     background: var(--theme-elevation-50);
diff --git a/packages/payload/src/admin/components/forms/field-types/shared.ts b/packages/payload/src/admin/components/forms/field-types/shared.ts
index 86ca28bb76..52fff79125 100644
--- a/packages/payload/src/admin/components/forms/field-types/shared.ts
+++ b/packages/payload/src/admin/components/forms/field-types/shared.ts
@@ -1,5 +1,7 @@
 import type { Locale, SanitizedLocalizationConfig } from '../../../../config/types'
 
+export const fieldBaseClass = 'field-type'
+
 /**
  * Determines whether a field should be displayed as right-to-left (RTL) based on its configuration, payload's localization configuration and the adming user's currently enabled locale.
 
diff --git a/packages/payload/src/admin/components/templates/Default/index.scss b/packages/payload/src/admin/components/templates/Default/index.scss
index 6cdb026a03..b60a446fad 100644
--- a/packages/payload/src/admin/components/templates/Default/index.scss
+++ b/packages/payload/src/admin/components/templates/Default/index.scss
@@ -19,9 +19,5 @@
     [dir='rtl'] & {
       margin-right: 0;
     }
-
-    &__wrap {
-      padding: 0 0 $baseline;
-    }
   }
 }
diff --git a/packages/payload/src/admin/components/views/Account/Default.tsx b/packages/payload/src/admin/components/views/Account/Default.tsx
index 22de87fbe6..4eaa5ea863 100644
--- a/packages/payload/src/admin/components/views/Account/Default.tsx
+++ b/packages/payload/src/admin/components/views/Account/Default.tsx
@@ -77,6 +77,7 @@ const DefaultAccount: React.FC<EditViewProps> = (props) => {
                   data={data}
                   hasSavePermission={hasSavePermission}
                   permissions={permissions}
+                  isAccountView
                 />
                 <div className={`${baseClass}__main`}>
                   <Meta
@@ -95,6 +96,7 @@ const DefaultAccount: React.FC<EditViewProps> = (props) => {
                         operation="update"
                         readOnly={!hasSavePermission}
                         useAPIKey={auth.useAPIKey}
+                        className={`${baseClass}__auth`}
                       />
                       <RenderFields
                         fieldSchema={fields}
diff --git a/packages/payload/src/admin/components/views/Account/index.scss b/packages/payload/src/admin/components/views/Account/index.scss
index a9a4c4a879..19189d962d 100644
--- a/packages/payload/src/admin/components/views/Account/index.scss
+++ b/packages/payload/src/admin/components/views/Account/index.scss
@@ -2,7 +2,7 @@
 
 .account {
   width: 100%;
-  padding-bottom: calc(var(--base) * 4);
+  padding-bottom: var(--spacing-view-bottom);
 
   &__form {
     height: 100%;
@@ -12,10 +12,13 @@
     margin-top: calc(var(--base) * 3);
   }
 
+  &__auth {
+    margin-bottom: var(--base);
+  }
+
   &__header {
     display: flex;
     flex-direction: column;
-    gap: var(--base);
   }
 
   &__payload-settings {
diff --git a/packages/payload/src/admin/components/views/Dashboard/Default.tsx b/packages/payload/src/admin/components/views/Dashboard/Default.tsx
index 7192e7f7f7..d3cbe39903 100644
--- a/packages/payload/src/admin/components/views/Dashboard/Default.tsx
+++ b/packages/payload/src/admin/components/views/Dashboard/Default.tsx
@@ -74,7 +74,7 @@ const Dashboard: React.FC<Props> = (props) => {
           beforeDashboard.map((Component, i) => <Component key={i} />)}
         {groups.map(({ entities, label }, groupIndex) => {
           return (
-            <React.Fragment key={groupIndex}>
+            <div className={`${baseClass}__group`} key={groupIndex}>
               <h2 className={`${baseClass}__label`}>{label}</h2>
               <ul className={`${baseClass}__card-list`}>
                 {entities.map(({ entity, type }, entityIndex) => {
@@ -127,7 +127,7 @@ const Dashboard: React.FC<Props> = (props) => {
                   )
                 })}
               </ul>
-            </React.Fragment>
+            </div>
           )
         })}
         {Array.isArray(afterDashboard) &&
diff --git a/packages/payload/src/admin/components/views/Dashboard/index.scss b/packages/payload/src/admin/components/views/Dashboard/index.scss
index ca2ef29691..72c1d7b47c 100644
--- a/packages/payload/src/admin/components/views/Dashboard/index.scss
+++ b/packages/payload/src/admin/components/views/Dashboard/index.scss
@@ -2,59 +2,57 @@
 
 .dashboard {
   width: 100%;
+  --gap: var(--base);
+  --cols: 5;
 
   &__wrap {
-    padding-bottom: base(2);
+    padding-bottom: var(--spacing-view-bottom);
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+  }
+
+  &__label {
+    margin: 0;
   }
 
   &__card-list {
-    width: calc(100% + #{$baseline});
-    margin: 0 - base(0.5);
     padding: 0;
+    margin: 0;
     list-style: none;
     display: flex;
+    gap: var(--gap);
     flex-wrap: wrap;
 
     li {
-      width: 20%;
-      margin-bottom: $baseline;
+      width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
     }
 
     .card {
       height: 100%;
-      margin: 0 base(0.5);
     }
   }
 
   @include large-break {
-    li {
-      width: 25%;
-    }
+    --cols: 4;
   }
 
   @include mid-break {
-    &__wrap {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    li {
-      width: 33.33%;
-    }
+    --gap: var(--base);
+    --cols: 2;
   }
 
   @include small-break {
-    &__card-list {
-      width: calc(100% + #{base(0.5)});
-      margin: 0 - base(0.25);
-    }
+    --cols: 1;
 
-    li {
-      width: 50%;
-    }
-
-    .card {
-      margin: 0 base(0.25) base(0.5);
+    &__wrap {
+      gap: var(--base);
     }
   }
 }
diff --git a/packages/payload/src/admin/components/views/Global/Default/index.scss b/packages/payload/src/admin/components/views/Global/Default/index.scss
index 4f1a4e2e54..493762b10f 100644
--- a/packages/payload/src/admin/components/views/Global/Default/index.scss
+++ b/packages/payload/src/admin/components/views/Global/Default/index.scss
@@ -1,51 +1,50 @@
 @import '../../../../scss/styles.scss';
 
-.global-edit {
+.global-default-edit {
   width: 100%;
+  display: flex;
 
-  &__wrapper {
-    display: flex;
+  &--has-sidebar {
+    .global-default-edit {
+      &__main {
+        width: 66.66%;
+      }
 
-    &--has-sidebar {
-      .global-edit {
-        // &__main {
-        //   width: calc(100% - #{base(15)});
-        // }
+      &__edit {
+        [dir='ltr'] & {
+          top: 0;
+          right: 0;
+          border-right: 1px solid var(--theme-elevation-100);
+          padding-right: calc(var(--base) * 2);
+        }
 
-        &__edit {
-          [dir='ltr'] & {
-            top: 0;
-            right: 0;
-            border-right: 1px solid var(--theme-elevation-100);
-          }
-
-          [dir='rtl'] & {
-            top: 0;
-            left: 0;
-            border-left: 1px solid var(--theme-elevation-100);
-          }
+        [dir='rtl'] & {
+          top: 0;
+          left: 0;
+          border-left: 1px solid var(--theme-elevation-100);
+          padding-left: calc(var(--base) * 2);
         }
       }
     }
   }
 
   &__main {
-    width: calc(100% - #{base(15)});
+    width: 100%;
     display: flex;
     flex-direction: column;
     min-height: 100%;
   }
 
   &__edit {
-    padding-top: base(1);
-    padding-bottom: base(4);
+    padding-top: calc(var(--base) * 1.5);
+    padding-bottom: var(--spacing-view-bottom);
     flex-grow: 1;
   }
 
   &__sidebar-wrap {
     position: sticky;
     top: 0;
-    width: base(15);
+    flex-grow: 1;
   }
 
   &__sidebar {
@@ -64,20 +63,47 @@
     display: flex;
     flex-direction: column;
     gap: var(--base);
-    padding: var(--base);
-
-    .render-fields {
-      & > *:last-child {
-        margin-bottom: 0;
-      }
-    }
+    padding: calc(var(--base) * 1.5) var(--gutter-h) var(--spacing-view-bottom)
+      calc(var(--base) * 2);
   }
 
   &__label {
     color: var(--theme-elevation-400);
   }
 
+  @include large-break {
+    &--no-sidebar {
+      .global-default-edit {
+        &__main {
+          width: 100%;
+        }
+      }
+    }
+  }
+
   @include mid-break {
+    display: block;
+
+    &--has-sidebar {
+      .global-default-edit {
+        &__main {
+          width: 100%;
+        }
+
+        &__edit {
+          [dir='ltr'] & {
+            border-right: 0;
+            padding-right: var(--gutter-h);
+          }
+
+          [dir='rtl'] & {
+            border-left: 0;
+            padding-left: var(--gutter-h);
+          }
+        }
+      }
+    }
+
     &__main {
       width: 100%;
       min-height: initial;
@@ -88,17 +114,13 @@
       width: 100%;
       height: initial;
       border-left: 0;
+      margin-top: calc(var(--base) / 2);
     }
 
     &__form {
       display: block;
     }
 
-    &__edit {
-      padding-top: var(--base);
-      padding-bottom: 0;
-    }
-
     &__sidebar-fields {
       padding-top: 0;
       padding-left: var(--gutter-h);
diff --git a/packages/payload/src/admin/components/views/Global/Default/index.tsx b/packages/payload/src/admin/components/views/Global/Default/index.tsx
index b38c5391dc..8cff9bbc02 100644
--- a/packages/payload/src/admin/components/views/Global/Default/index.tsx
+++ b/packages/payload/src/admin/components/views/Global/Default/index.tsx
@@ -13,7 +13,7 @@ import Meta from '../../../utilities/Meta'
 import './index.scss'
 import { EditViewProps } from '../../types'
 
-const baseClass = 'global-edit'
+const baseClass = 'global-default-edit'
 
 export const DefaultGlobalEdit: React.FC<EditViewProps> = (props) => {
   if ('global' in props) {
@@ -47,7 +47,10 @@ export const DefaultGlobalEdit: React.FC<EditViewProps> = (props) => {
           permissions={permissions}
         />
         <div
-          className={[`${baseClass}__wrapper`, hasSidebar && `${baseClass}__wrapper--has-sidebar`]
+          className={[
+            baseClass,
+            hasSidebar ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
+          ]
             .filter(Boolean)
             .join(' ')}
         >
diff --git a/packages/payload/src/admin/components/views/Login/index.scss b/packages/payload/src/admin/components/views/Login/index.scss
index e05eabc5d3..f88736b47e 100644
--- a/packages/payload/src/admin/components/views/Login/index.scss
+++ b/packages/payload/src/admin/components/views/Login/index.scss
@@ -7,4 +7,18 @@
     width: 100%;
     margin-bottom: base(2);
   }
+
+  &__wrap {
+    & > *:first-child {
+      margin-top: 0;
+    }
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+
+    .btn {
+      margin: 0;
+    }
+  }
 }
diff --git a/packages/payload/src/admin/components/views/Login/index.tsx b/packages/payload/src/admin/components/views/Login/index.tsx
index 36810ca1b9..1e14d097ca 100644
--- a/packages/payload/src/admin/components/views/Login/index.tsx
+++ b/packages/payload/src/admin/components/views/Login/index.tsx
@@ -57,7 +57,6 @@ const Login: React.FC = () => {
                 <Link to={`${admin}${logoutRoute}`}>{t('logOut')}</Link>
               </Trans>
             </p>
-            <br />
             <Button buttonStyle="secondary" el="link" to={admin}>
               {t('general:backToDashboard')}
             </Button>
@@ -74,6 +73,7 @@ const Login: React.FC = () => {
           {!collection.auth.disableLocalStrategy && (
             <Form
               action={`${serverURL}${api}/${userSlug}/login`}
+              className={`${baseClass}__form`}
               disableSuccessStatus
               initialData={{
                 email: autoLogin && autoLogin.prefillOnly ? autoLogin.email : undefined,
diff --git a/packages/payload/src/admin/components/views/Logout/index.scss b/packages/payload/src/admin/components/views/Logout/index.scss
index 1bb3e074aa..089ee38010 100644
--- a/packages/payload/src/admin/components/views/Logout/index.scss
+++ b/packages/payload/src/admin/components/views/Logout/index.scss
@@ -7,6 +7,16 @@
   min-height: 100vh;
 
   &__wrap {
-    margin: 0 auto base(1);
+    & > *:first-child {
+      margin-top: 0;
+    }
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+
+    .btn {
+      margin: 0;
+    }
   }
 }
diff --git a/packages/payload/src/admin/components/views/Logout/index.tsx b/packages/payload/src/admin/components/views/Logout/index.tsx
index be6b4e22a8..1f192a3834 100644
--- a/packages/payload/src/admin/components/views/Logout/index.tsx
+++ b/packages/payload/src/admin/components/views/Logout/index.tsx
@@ -34,7 +34,6 @@ const Logout: React.FC<{ inactivity?: boolean }> = (props) => {
       <div className={`${baseClass}__wrap`}>
         {inactivity && <h2>{t('loggedOutInactivity')}</h2>}
         {!inactivity && <h2>{t('loggedOutSuccessfully')}</h2>}
-        <br />
         <Button
           buttonStyle="secondary"
           el="anchor"
diff --git a/packages/payload/src/admin/components/views/Version/Compare/index.tsx b/packages/payload/src/admin/components/views/Version/Compare/index.tsx
index 47e735f296..5522dd7337 100644
--- a/packages/payload/src/admin/components/views/Version/Compare/index.tsx
+++ b/packages/payload/src/admin/components/views/Version/Compare/index.tsx
@@ -11,6 +11,7 @@ import ReactSelect from '../../../elements/ReactSelect'
 import { useConfig } from '../../../utilities/Config'
 import { mostRecentVersionOption, publishedVersionOption } from '../shared'
 import './index.scss'
+import { fieldBaseClass } from '../../../forms/field-types/shared'
 
 const baseClass = 'compare-version'
 
@@ -85,10 +86,6 @@ const CompareVersion: React.FC<Props> = (props) => {
     [dateFormat, baseURL, parentID, versionID, t, i18n],
   )
 
-  const classes = ['field-type', baseClass, errorLoading && 'error-loading']
-    .filter(Boolean)
-    .join(' ')
-
   useEffect(() => {
     getResults({ lastLoadedPage: 1 })
   }, [getResults])
@@ -99,7 +96,11 @@ const CompareVersion: React.FC<Props> = (props) => {
   }, [publishedDoc])
 
   return (
-    <div className={classes}>
+    <div
+      className={[fieldBaseClass, baseClass, errorLoading && 'error-loading']
+        .filter(Boolean)
+        .join(' ')}
+    >
       <div className={`${baseClass}__label`}>{t('compareVersion')}</div>
       {!errorLoading && (
         <ReactSelect
diff --git a/packages/payload/src/admin/components/views/Version/RenderFieldsToDiff/index.scss b/packages/payload/src/admin/components/views/Version/RenderFieldsToDiff/index.scss
index 93f165a01f..c372af68e6 100644
--- a/packages/payload/src/admin/components/views/Version/RenderFieldsToDiff/index.scss
+++ b/packages/payload/src/admin/components/views/Version/RenderFieldsToDiff/index.scss
@@ -1,12 +1,18 @@
 @import '../../../../scss/styles.scss';
 
 .render-field-diffs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base);
+
   &__field {
-    margin-bottom: $baseline;
     overflow-wrap: anywhere;
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
   }
 
-  &__locale {
-    margin-bottom: base(0.5);
+  @include small-break {
+    gap: calc(var(--base) / 2);
   }
 }
diff --git a/packages/payload/src/admin/components/views/Version/Version.tsx b/packages/payload/src/admin/components/views/Version/Version.tsx
index b4bf6efb27..bf0344c8f8 100644
--- a/packages/payload/src/admin/components/views/Version/Version.tsx
+++ b/packages/payload/src/admin/components/views/Version/Version.tsx
@@ -202,22 +202,26 @@ const VersionView: React.FC<Props> = ({ collection, global }) => {
       <div className={baseClass}>
         <Meta description={metaDesc} title={metaTitle} />
         <Gutter className={`${baseClass}__wrap`}>
-          <div className={`${baseClass}__intro`}>
-            {t('versionCreatedOn', { version: t(doc?.autosave ? 'autosavedVersion' : 'version') })}
+          <div className={`${baseClass}__header-wrap`}>
+            <p className={`${baseClass}__created-at`}>
+              {t('versionCreatedOn', {
+                version: t(doc?.autosave ? 'autosavedVersion' : 'version'),
+              })}
+            </p>
+            <header className={`${baseClass}__header`}>
+              <h2>{formattedCreatedAt}</h2>
+              {canUpdate && (
+                <Restore
+                  className={`${baseClass}__restore`}
+                  collection={collection}
+                  global={global}
+                  originalDocID={id}
+                  versionDate={formattedCreatedAt}
+                  versionID={versionID}
+                />
+              )}
+            </header>
           </div>
-          <header className={`${baseClass}__header`}>
-            <h2>{formattedCreatedAt}</h2>
-            {canUpdate && (
-              <Restore
-                className={`${baseClass}__restore`}
-                collection={collection}
-                global={global}
-                originalDocID={id}
-                versionDate={formattedCreatedAt}
-                versionID={versionID}
-              />
-            )}
-          </header>
           <div className={`${baseClass}__controls`}>
             <CompareVersion
               baseURL={compareBaseURL}
diff --git a/packages/payload/src/admin/components/views/Version/index.scss b/packages/payload/src/admin/components/views/Version/index.scss
index b817728e7e..01fde0f516 100644
--- a/packages/payload/src/admin/components/views/Version/index.scss
+++ b/packages/payload/src/admin/components/views/Version/index.scss
@@ -2,18 +2,22 @@
 
 .view-version {
   width: 100%;
-  margin-bottom: calc(var(--base) * 2);
+  padding-bottom: var(--spacing-view-bottom);
 
   &__wrap {
-    padding-top: var(--base);
+    padding-top: calc(var(--base) * 1.5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
   }
 
-  &__intro {
-    margin-bottom: calc(var(--base) / 2);
+  &__header-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 4);
   }
 
   &__header {
-    margin-bottom: var(--base);
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -23,9 +27,13 @@
     }
   }
 
+  &__created-at {
+    margin: 0;
+    color: var(--theme-elevation-500);
+  }
+
   &__controls {
     display: flex;
-    margin-bottom: var(--base);
     gap: var(--base);
 
     > * {
@@ -44,10 +52,8 @@
     }
 
     &__controls {
-      display: block;
-      > * {
-        margin-bottom: base(0.5);
-      }
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
     }
 
     &__restore {
@@ -58,6 +64,7 @@
   @include small-break {
     &__wrap {
       padding-top: calc(var(--base) / 2);
+      gap: calc(var(--base) / 2);
     }
   }
 }
diff --git a/packages/payload/src/admin/components/views/Versions/index.scss b/packages/payload/src/admin/components/views/Versions/index.scss
index f047f73116..8d4ef20ad9 100644
--- a/packages/payload/src/admin/components/views/Versions/index.scss
+++ b/packages/payload/src/admin/components/views/Versions/index.scss
@@ -6,15 +6,16 @@
 
   &__wrap {
     padding-top: 0;
-    padding-bottom: base(4);
+    padding-bottom: var(--spacing-view-bottom);
+    margin-top: calc(var(--base) * 0.75);
   }
 
   &__header {
     margin-bottom: var(--base);
   }
 
-  &__no-version {
-    margin-top: calc(var(--base) * 2);
+  &__no-versions {
+    margin-top: calc(var(--base) * 1.5);
   }
 
   &__parent-doc {
@@ -27,6 +28,7 @@
     [dir='ltr'] & {
       margin-left: auto;
     }
+
     [dir='rtl'] & {
       margin-right: auto;
     }
@@ -54,6 +56,7 @@
       margin-right: base(1);
       margin-left: auto;
     }
+
     [dir='rtl'] & {
       margin-left: base(1);
       margin-right: auto;
@@ -63,6 +66,24 @@
   @include mid-break {
     &__wrap {
       padding-top: 0;
+      margin-top: 0;
+    }
+
+    // on mobile, extend the table all the way to the viewport edges
+    // this is to visually indicate overflowing content
+    .table {
+      display: flex;
+      width: calc(100% + calc(var(--gutter-h) * 2));
+      max-width: unset;
+      left: calc(var(--gutter-h) * -1);
+      position: relative;
+      padding-left: var(--gutter-h);
+
+      &::after {
+        content: '';
+        height: 1px;
+        padding-right: var(--gutter-h);
+      }
     }
 
     &__page-controls {
@@ -73,6 +94,7 @@
       [dir='ltr'] & {
         margin-left: 0;
       }
+
       [dir='rtl'] & {
         margin-right: 0;
       }
diff --git a/packages/payload/src/admin/components/views/collections/Edit/Auth/APIKey.tsx b/packages/payload/src/admin/components/views/collections/Edit/Auth/APIKey.tsx
index ee335a5466..b3ef2ab393 100644
--- a/packages/payload/src/admin/components/views/collections/Edit/Auth/APIKey.tsx
+++ b/packages/payload/src/admin/components/views/collections/Edit/Auth/APIKey.tsx
@@ -8,6 +8,7 @@ import GenerateConfirmation from '../../../../elements/GenerateConfirmation'
 import { useFormFields } from '../../../../forms/Form/context'
 import Label from '../../../../forms/Label'
 import useField from '../../../../forms/useField'
+import { fieldBaseClass } from '../../../../forms/field-types/shared'
 
 const path = 'apiKey'
 const baseClass = 'api-key'
@@ -67,11 +68,9 @@ const APIKey: React.FC<{ readOnly?: boolean }> = ({ readOnly }) => {
     }
   }, [highlightedField])
 
-  const classes = ['field-type', 'api-key', 'read-only'].filter(Boolean).join(' ')
-
   return (
     <React.Fragment>
-      <div className={classes}>
+      <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>
         <Label htmlFor={path} label={APIKeyLabel} />
         <input
           className={highlightedField ? 'highlight' : undefined}
diff --git a/packages/payload/src/admin/components/views/collections/Edit/Auth/index.scss b/packages/payload/src/admin/components/views/collections/Edit/Auth/index.scss
index 9b423cf906..c8488181dd 100644
--- a/packages/payload/src/admin/components/views/collections/Edit/Auth/index.scss
+++ b/packages/payload/src/admin/components/views/collections/Edit/Auth/index.scss
@@ -1,22 +1,41 @@
 @import '../../../../../scss/styles.scss';
 
 .auth-fields {
-  padding: base(2) base(2) base(1.5);
+  padding: base(2);
   background: var(--theme-elevation-50);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base);
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
+    flex-wrap: wrap;
+  }
+
+  &__changing-password {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
 
   .btn {
-    margin-top: 0;
-    [dir='ltr'] & {
-      margin-right: base(0.5);
-    }
-    [dir='rtl'] & {
-      margin-left: base(0.5);
-    }
+    margin: 0;
   }
 
   &__api-key-label {
     position: relative;
   }
+
+  @include mid-break {
+    padding: var(--base);
+    gap: calc(var(--base) / 2);
+
+    &__changing-password {
+      gap: calc(var(--base) / 2);
+    }
+  }
 }
 
 .field-type.api-key {
diff --git a/packages/payload/src/admin/components/views/collections/Edit/Auth/index.tsx b/packages/payload/src/admin/components/views/collections/Edit/Auth/index.tsx
index 8725bb07bc..8b9e96267a 100644
--- a/packages/payload/src/admin/components/views/collections/Edit/Auth/index.tsx
+++ b/packages/payload/src/admin/components/views/collections/Edit/Auth/index.tsx
@@ -18,6 +18,7 @@ const baseClass = 'auth-fields'
 
 const Auth: React.FC<Props> = (props) => {
   const {
+    className,
     collection,
     collection: { slug },
     email,
@@ -27,6 +28,7 @@ const Auth: React.FC<Props> = (props) => {
     useAPIKey,
     verify,
   } = props
+
   const [changingPassword, setChangingPassword] = useState(requirePassword)
   const enableAPIKey = useFormFields(([fields]) => fields.enableAPIKey)
   const dispatchFields = useFormFields((reducer) => reducer[1])
@@ -82,7 +84,7 @@ const Auth: React.FC<Props> = (props) => {
   }
 
   return (
-    <div className={baseClass}>
+    <div className={[baseClass, className].filter(Boolean).join(' ')}>
       {!collection.auth.disableLocalStrategy && (
         <React.Fragment>
           <Email
@@ -113,26 +115,30 @@ const Auth: React.FC<Props> = (props) => {
               )}
             </div>
           )}
-          {!changingPassword && !requirePassword && (
-            <Button
-              buttonStyle="secondary"
-              disabled={readOnly}
-              id="change-password"
-              onClick={() => handleChangePassword(true)}
-              size="small"
-            >
-              {t('changePassword')}
-            </Button>
-          )}
-          {operation === 'update' && (
-            <Button
-              buttonStyle="secondary"
-              disabled={readOnly}
-              onClick={() => unlock()}
-              size="small"
-            >
-              {t('forceUnlock')}
-            </Button>
+          {((!changingPassword && !requirePassword) || operation === 'update') && (
+            <div className={`${baseClass}__controls`}>
+              {!changingPassword && !requirePassword && (
+                <Button
+                  buttonStyle="secondary"
+                  disabled={readOnly}
+                  id="change-password"
+                  onClick={() => handleChangePassword(true)}
+                  size="small"
+                >
+                  {t('changePassword')}
+                </Button>
+              )}
+              {operation === 'update' && (
+                <Button
+                  buttonStyle="secondary"
+                  disabled={readOnly}
+                  onClick={() => unlock()}
+                  size="small"
+                >
+                  {t('forceUnlock')}
+                </Button>
+              )}
+            </div>
           )}
         </React.Fragment>
       )}
diff --git a/packages/payload/src/admin/components/views/collections/Edit/Auth/types.ts b/packages/payload/src/admin/components/views/collections/Edit/Auth/types.ts
index a1cf96945b..9a561c3a26 100644
--- a/packages/payload/src/admin/components/views/collections/Edit/Auth/types.ts
+++ b/packages/payload/src/admin/components/views/collections/Edit/Auth/types.ts
@@ -2,6 +2,7 @@ import type { VerifyConfig } from '../../../../../../auth/types'
 import type { SanitizedCollectionConfig } from '../../../../../../collections/config/types'
 
 export type Props = {
+  className?: string
   collection: SanitizedCollectionConfig
   email: string
   operation: 'create' | 'update'
diff --git a/packages/payload/src/admin/components/views/collections/Edit/Default/index.scss b/packages/payload/src/admin/components/views/collections/Edit/Default/index.scss
index b21b7109ce..8ebd6705fa 100644
--- a/packages/payload/src/admin/components/views/collections/Edit/Default/index.scss
+++ b/packages/payload/src/admin/components/views/collections/Edit/Default/index.scss
@@ -1,36 +1,35 @@
 @import '../../../../../scss/styles.scss';
 
-.collection-edit {
+.collection-default-edit {
   width: 100%;
+  display: flex;
 
-  &__wrapper {
-    display: flex;
+  &--has-sidebar {
+    .collection-default-edit {
+      &__main {
+        width: 66.66%;
+      }
 
-    &--has-sidebar {
-      .collection-edit {
-        // &__main {
-        //   width: calc(100% - #{base(15)});
-        // }
+      &__edit {
+        [dir='ltr'] & {
+          top: 0;
+          right: 0;
+          border-right: 1px solid var(--theme-elevation-100);
+          padding-right: calc(var(--base) * 2);
+        }
 
-        &__edit {
-          [dir='ltr'] & {
-            top: 0;
-            right: 0;
-            border-right: 1px solid var(--theme-elevation-100);
-          }
-
-          [dir='rtl'] & {
-            top: 0;
-            left: 0;
-            border-left: 1px solid var(--theme-elevation-100);
-          }
+        [dir='rtl'] & {
+          top: 0;
+          left: 0;
+          border-left: 1px solid var(--theme-elevation-100);
+          padding-left: calc(var(--base) * 2);
         }
       }
     }
   }
 
   &__main {
-    width: calc(100% - #{base(15)});
+    width: 100%;
     display: flex;
     flex-direction: column;
     min-height: 100%;
@@ -38,14 +37,18 @@
 
   &__edit {
     padding-top: calc(var(--base) * 1.5);
-    padding-bottom: base(4);
+    padding-bottom: var(--spacing-view-bottom);
     flex-grow: 1;
   }
 
+  &__auth {
+    margin-bottom: var(--base);
+  }
+
   &__sidebar-wrap {
     position: sticky;
     top: 0;
-    width: base(15);
+    flex-grow: 1;
   }
 
   &__sidebar {
@@ -64,13 +67,10 @@
     display: flex;
     flex-direction: column;
     gap: var(--base);
-    padding: var(--base);
-
-    .render-fields {
-      & > *:last-child {
-        margin-bottom: 0;
-      }
-    }
+    padding-top: calc(var(--base) * 1.5);
+    padding-left: calc(var(--base) * 2);
+    padding-right: var(--gutter-h);
+    padding-bottom: var(--spacing-view-bottom);
   }
 
   &__label {
@@ -78,6 +78,28 @@
   }
 
   @include mid-break {
+    display: block;
+
+    &--has-sidebar {
+      .collection-default-edit {
+        &__main {
+          width: 100%;
+        }
+
+        &__edit {
+          [dir='ltr'] & {
+            border-right: 0;
+            padding-right: var(--gutter-h);
+          }
+
+          [dir='rtl'] & {
+            border-left: 0;
+            padding-left: var(--gutter-h);
+          }
+        }
+      }
+    }
+
     &__main {
       width: 100%;
       min-height: initial;
@@ -88,17 +110,13 @@
       width: 100%;
       height: initial;
       border-left: 0;
+      margin-top: calc(var(--base) / 2);
     }
 
     &__form {
       display: block;
     }
 
-    &__edit {
-      padding-top: var(--base);
-      padding-bottom: 0;
-    }
-
     &__sidebar-fields {
       padding-top: 0;
       padding-left: var(--gutter-h);
diff --git a/packages/payload/src/admin/components/views/collections/Edit/Default/index.tsx b/packages/payload/src/admin/components/views/collections/Edit/Default/index.tsx
index 6a29c48a14..e0c5bc8567 100644
--- a/packages/payload/src/admin/components/views/collections/Edit/Default/index.tsx
+++ b/packages/payload/src/admin/components/views/collections/Edit/Default/index.tsx
@@ -15,7 +15,7 @@ import Upload from '../Upload'
 import './index.scss'
 import { EditViewProps } from '../../../types'
 
-const baseClass = 'collection-edit'
+const baseClass = 'collection-default-edit'
 
 export const DefaultCollectionEdit: React.FC<
   EditViewProps & {
@@ -23,9 +23,9 @@ export const DefaultCollectionEdit: React.FC<
     disableActions?: boolean
   }
 > = (props) => {
-  const { i18n, t } = useTranslation('general')
-
   if ('collection' in props) {
+    const { i18n, t } = useTranslation('general')
+
     const {
       id,
       apiURL,
@@ -67,7 +67,10 @@ export const DefaultCollectionEdit: React.FC<
           permissions={permissions}
         />
         <div
-          className={[`${baseClass}__wrapper`, hasSidebar && `${baseClass}__wrapper--has-sidebar`]
+          className={[
+            baseClass,
+            hasSidebar ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
+          ]
             .filter(Boolean)
             .join(' ')}
         >
@@ -88,6 +91,7 @@ export const DefaultCollectionEdit: React.FC<
             <Gutter className={`${baseClass}__edit`}>
               {auth && (
                 <Auth
+                  className={`${baseClass}__auth`}
                   collection={collection}
                   email={data?.email}
                   operation={operation}
@@ -106,6 +110,7 @@ export const DefaultCollectionEdit: React.FC<
                 filter={(field) => !field?.admin?.position || field?.admin?.position !== 'sidebar'}
                 permissions={permissions.fields}
                 readOnly={!hasSavePermission}
+                className={`${baseClass}__fields`}
               />
             </Gutter>
           </div>
@@ -124,6 +129,4 @@ export const DefaultCollectionEdit: React.FC<
       </Fragment>
     )
   }
-
-  return null
 }
diff --git a/packages/payload/src/admin/components/views/collections/Edit/Upload/index.scss b/packages/payload/src/admin/components/views/collections/Edit/Upload/index.scss
index 52fec41cd2..a538ccf924 100644
--- a/packages/payload/src/admin/components/views/collections/Edit/Upload/index.scss
+++ b/packages/payload/src/admin/components/views/collections/Edit/Upload/index.scss
@@ -2,7 +2,7 @@
 
 .file-field {
   position: relative;
-  margin: base(1.5) 0 base(2);
+  margin-bottom: var(--base);
   background: var(--theme-elevation-50);
 
   .tooltip.error-message {
diff --git a/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx b/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx
index 77a2d25079..128b487d36 100644
--- a/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx
+++ b/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx
@@ -11,6 +11,7 @@ import Label from '../../../../forms/Label'
 import useField from '../../../../forms/useField'
 import { useDocumentInfo } from '../../../../utilities/DocumentInfo'
 import './index.scss'
+import { fieldBaseClass } from '../../../../forms/field-types/shared'
 
 const baseClass = 'file-field'
 
@@ -133,17 +134,17 @@ const Upload: React.FC<Props> = (props) => {
     return () => null
   }, [handleDragIn, handleDragOut, handleDrop, value])
 
-  const classes = [baseClass, dragging && `${baseClass}--dragging`, 'field-type']
-    .filter(Boolean)
-    .join(' ')
-
   const canRemoveUpload =
     docPermissions?.update?.permission &&
     'delete' in docPermissions &&
     docPermissions?.delete?.permission
 
   return (
-    <div className={classes}>
+    <div
+      className={[fieldBaseClass, baseClass, dragging && `${baseClass}--dragging`]
+        .filter(Boolean)
+        .join(' ')}
+    >
       <Error message={errorMessage} showError={showError} />
       {doc.filename && !replacingFile && (
         <FileDetails
diff --git a/packages/payload/src/admin/components/views/collections/List/Default.tsx b/packages/payload/src/admin/components/views/collections/List/Default.tsx
index 22ab616767..38c05590bf 100644
--- a/packages/payload/src/admin/components/views/collections/List/Default.tsx
+++ b/packages/payload/src/admin/components/views/collections/List/Default.tsx
@@ -129,52 +129,53 @@ const DefaultList: React.FC<Props> = (props) => {
           )}
           {Array.isArray(AfterListTable) &&
             AfterListTable.map((Component, i) => <Component key={i} {...props} />)}
-
-          <div className={`${baseClass}__page-controls`}>
-            <Paginator
-              disableHistoryChange={modifySearchParams === false}
-              hasNextPage={data.hasNextPage}
-              hasPrevPage={data.hasPrevPage}
-              limit={data.limit}
-              nextPage={data.nextPage}
-              numberOfNeighbors={1}
-              onChange={handlePageChange}
-              page={data.page}
-              prevPage={data.prevPage}
-              totalPages={data.totalPages}
-            />
-            {data?.totalDocs > 0 && (
-              <Fragment>
-                <div className={`${baseClass}__page-info`}>
-                  {data.page * data.limit - (data.limit - 1)}-
-                  {data.totalPages > 1 && data.totalPages !== data.page
-                    ? data.limit * data.page
-                    : data.totalDocs}{' '}
-                  {t('of')} {data.totalDocs}
-                </div>
-                <PerPage
-                  handleChange={handlePerPageChange}
-                  limit={limit}
-                  limits={collection?.admin?.pagination?.limits}
-                  modifySearchParams={modifySearchParams}
-                  resetPage={data.totalDocs <= data.pagingCounter}
-                />
-                <div className={`${baseClass}__list-selection`}>
+          {data.docs && data.docs.length > 0 && (
+            <div className={`${baseClass}__page-controls`}>
+              <Paginator
+                disableHistoryChange={modifySearchParams === false}
+                hasNextPage={data.hasNextPage}
+                hasPrevPage={data.hasPrevPage}
+                limit={data.limit}
+                nextPage={data.nextPage}
+                numberOfNeighbors={1}
+                onChange={handlePageChange}
+                page={data.page}
+                prevPage={data.prevPage}
+                totalPages={data.totalPages}
+              />
+              {data?.totalDocs > 0 && (
+                <Fragment>
+                  <div className={`${baseClass}__page-info`}>
+                    {data.page * data.limit - (data.limit - 1)}-
+                    {data.totalPages > 1 && data.totalPages !== data.page
+                      ? data.limit * data.page
+                      : data.totalDocs}{' '}
+                    {t('of')} {data.totalDocs}
+                  </div>
+                  <PerPage
+                    handleChange={handlePerPageChange}
+                    limit={limit}
+                    limits={collection?.admin?.pagination?.limits}
+                    modifySearchParams={modifySearchParams}
+                    resetPage={data.totalDocs <= data.pagingCounter}
+                  />
                   {smallBreak && (
-                    <Fragment>
-                      <ListSelection label={getTranslation(collection.labels.plural, i18n)} />
-                      <div className={`${baseClass}__list-selection-actions`}>
-                        <EditMany collection={collection} resetParams={resetParams} />
-                        <PublishMany collection={collection} resetParams={resetParams} />
-                        <UnpublishMany collection={collection} resetParams={resetParams} />
-                        <DeleteMany collection={collection} resetParams={resetParams} />
-                      </div>
-                    </Fragment>
+                    <div className={`${baseClass}__list-selection`}>
+                      <Fragment>
+                        <ListSelection label={getTranslation(collection.labels.plural, i18n)} />
+                        <div className={`${baseClass}__list-selection-actions`}>
+                          <EditMany collection={collection} resetParams={resetParams} />
+                          <PublishMany collection={collection} resetParams={resetParams} />
+                          <UnpublishMany collection={collection} resetParams={resetParams} />
+                          <DeleteMany collection={collection} resetParams={resetParams} />
+                        </div>
+                      </Fragment>
+                    </div>
                   )}
-                </div>
-              </Fragment>
-            )}
-          </div>
+                </Fragment>
+              )}
+            </div>
+          )}
         </Gutter>
       </SelectionProvider>
       {Array.isArray(AfterList) &&
diff --git a/packages/payload/src/admin/components/views/collections/List/SelectAll/index.scss b/packages/payload/src/admin/components/views/collections/List/SelectAll/index.scss
new file mode 100644
index 0000000000..9f0794b8f0
--- /dev/null
+++ b/packages/payload/src/admin/components/views/collections/List/SelectAll/index.scss
@@ -0,0 +1,7 @@
+@import '../../../../../scss/styles.scss';
+
+.select-all {
+  &__checkbox {
+    display: block;
+  }
+}
diff --git a/packages/payload/src/admin/components/views/collections/List/SelectAll/index.tsx b/packages/payload/src/admin/components/views/collections/List/SelectAll/index.tsx
index bfa2e11240..208f36239d 100644
--- a/packages/payload/src/admin/components/views/collections/List/SelectAll/index.tsx
+++ b/packages/payload/src/admin/components/views/collections/List/SelectAll/index.tsx
@@ -3,6 +3,9 @@ import { useTranslation } from 'react-i18next'
 
 import { CheckboxInput } from '../../../../forms/field-types/Checkbox/Input'
 import { SelectAllStatus, useSelection } from '../SelectionProvider'
+import './index.scss'
+
+const baseClass = 'select-all'
 
 const SelectAll: React.FC = () => {
   const { t } = useTranslation('general')
@@ -17,6 +20,7 @@ const SelectAll: React.FC = () => {
       id="select-all"
       onToggle={() => toggleAll()}
       partialChecked={selectAll === SelectAllStatus.Some}
+      className={`${baseClass}__checkbox`}
     />
   )
 }
diff --git a/packages/payload/src/admin/components/views/collections/List/SelectRow/index.scss b/packages/payload/src/admin/components/views/collections/List/SelectRow/index.scss
index 741960692e..37f01ccc67 100644
--- a/packages/payload/src/admin/components/views/collections/List/SelectRow/index.scss
+++ b/packages/payload/src/admin/components/views/collections/List/SelectRow/index.scss
@@ -1,49 +1,7 @@
 @import '../../../../../scss/styles.scss';
 
 .select-row {
-  button {
-    @extend %btn-reset;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &:focus:not(:focus-visible),
-    &:active {
-      outline: none;
-    }
-
-    &:hover {
-      svg {
-        opacity: 0.2;
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
-    }
-  }
-
-  &__input {
-    @include formInput;
-    padding: 0;
-    line-height: 0;
-    position: relative;
-    width: $baseline;
-    height: $baseline;
-
-    svg {
-      opacity: 0;
-    }
-  }
-
-  &--checked {
-    button {
-      .select-row__input {
-        svg {
-          opacity: 1;
-        }
-      }
-    }
+  &__checkbox {
+    display: block;
   }
 }
diff --git a/packages/payload/src/admin/components/views/collections/List/SelectRow/index.tsx b/packages/payload/src/admin/components/views/collections/List/SelectRow/index.tsx
index afd2484995..adca8d7b3d 100644
--- a/packages/payload/src/admin/components/views/collections/List/SelectRow/index.tsx
+++ b/packages/payload/src/admin/components/views/collections/List/SelectRow/index.tsx
@@ -4,10 +4,18 @@ import { CheckboxInput } from '../../../../forms/field-types/Checkbox/Input'
 import { useSelection } from '../SelectionProvider'
 import './index.scss'
 
+const baseClass = 'select-row'
+
 const SelectRow: React.FC<{ id: number | string }> = ({ id }) => {
   const { selected, setSelection } = useSelection()
 
-  return <CheckboxInput checked={selected[id]} onToggle={() => setSelection(id)} />
+  return (
+    <CheckboxInput
+      checked={selected[id]}
+      onToggle={() => setSelection(id)}
+      className={`${baseClass}__checkbox`}
+    />
+  )
 }
 
 export default SelectRow
diff --git a/packages/payload/src/admin/components/views/collections/List/index.scss b/packages/payload/src/admin/components/views/collections/List/index.scss
index b3e8ed3ab5..5e3db4ca13 100644
--- a/packages/payload/src/admin/components/views/collections/List/index.scss
+++ b/packages/payload/src/admin/components/views/collections/List/index.scss
@@ -3,14 +3,16 @@
 .collection-list {
   width: 100%;
   margin-top: base(0.5);
-  margin-bottom: base(2);
 
   &__wrap {
-    padding-bottom: base(4);
+    padding-bottom: var(--spacing-view-bottom);
+
+    & > *:not(:last-child) {
+      margin-bottom: var(--base);
+    }
   }
 
   &__header {
-    margin-bottom: $baseline;
     display: flex;
     align-items: flex-end;
     flex-wrap: wrap;
@@ -26,7 +28,7 @@
 
     .pill {
       position: relative;
-      top: -8px;
+      top: -14px;
       margin: 0;
     }
   }
@@ -49,6 +51,17 @@
     }
   }
 
+  &__no-results {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--base);
+
+    & > * {
+      margin: 0;
+    }
+  }
+
   &__page-controls {
     width: 100%;
     display: flex;
@@ -127,6 +140,23 @@
       margin: 0;
     }
 
+    // on mobile, extend the table all the way to the viewport edges
+    // this is to visually indicate overflowing content
+    .table {
+      display: flex;
+      width: calc(100% + calc(var(--gutter-h) * 2));
+      max-width: unset;
+      left: calc(var(--gutter-h) * -1);
+      position: relative;
+      padding-left: var(--gutter-h);
+
+      &::after {
+        content: '';
+        height: 1px;
+        padding-right: var(--gutter-h);
+      }
+    }
+
     &__page-controls {
       flex-wrap: wrap;
     }
@@ -147,7 +177,7 @@
 
     &__header {
       .pill {
-        top: -2px;
+        top: -6px;
       }
     }
   }
diff --git a/packages/payload/src/admin/scss/app.scss b/packages/payload/src/admin/scss/app.scss
index 0754167858..2e04831dee 100644
--- a/packages/payload/src/admin/scss/app.scss
+++ b/packages/payload/src/admin/scss/app.scss
@@ -36,6 +36,8 @@
   --accessibility-outline-offset: 2px;
 
   --gutter-h: #{base(6)};
+  --spacing-view-bottom: var(--gutter-h);
+  --doc-controls-height: calc(var(--base) * 3);
 
   @include large-break {
     --gutter-h: #{base(3)};
@@ -43,10 +45,12 @@
 
   @include mid-break {
     --gutter-h: #{base(2)};
+    --doc-controls-height: calc(var(--base) * 1.5);
   }
 
   @include small-break {
     --gutter-h: #{base(0.5)};
+    --spacing-view-bottom: calc(var(--base) * 2);
   }
 }
 
diff --git a/packages/payload/src/admin/scss/type.scss b/packages/payload/src/admin/scss/type.scss
index 22e65e7a9d..57b318a349 100644
--- a/packages/payload/src/admin/scss/type.scss
+++ b/packages/payload/src/admin/scss/type.scss
@@ -24,25 +24,23 @@
 %h1 {
   margin: 0 0 base(1);
   font-size: base(2);
-  line-height: 1;
+  line-height: 1.15;
   letter-spacing: -1px;
 
   @include small-break {
     letter-spacing: -0.5px;
     font-size: base(1.25);
-    line-height: base(1.25);
   }
 }
 
 %h2 {
   margin: 0 0 base(1);
   font-size: base(1.25);
-  line-height: base(1.5);
+  line-height: 1.15;
   letter-spacing: -0.5px;
 
   @include small-break {
     font-size: base(0.85);
-    line-height: base(0.85);
   }
 }
 
@@ -54,7 +52,7 @@
 
   @include small-break {
     font-size: base(0.65);
-    line-height: base(0.75);
+    line-height: 1.25;
   }
 }
 
diff --git a/packages/payload/src/admin/scss/vars.scss b/packages/payload/src/admin/scss/vars.scss
index 1f6671f7b5..041d975a6e 100644
--- a/packages/payload/src/admin/scss/vars.scss
+++ b/packages/payload/src/admin/scss/vars.scss
@@ -57,8 +57,8 @@ $style-stroke-width-m: 2px !default;
 // MISC
 //////////////////////////////
 
-$top-header-offset: calc(#{base(4)} - 1px);
-$top-header-offset-m: base(3);
+$top-header-offset: calc(var(--base) - 1px);
+$top-header-offset-m: calc(var(--base) * 3);
 $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
 
 //////////////////////////////
diff --git a/packages/richtext-slate/src/field/index.scss b/packages/richtext-slate/src/field/index.scss
index 38e499c0c4..92dd43de06 100644
--- a/packages/richtext-slate/src/field/index.scss
+++ b/packages/richtext-slate/src/field/index.scss
@@ -11,7 +11,7 @@
     border: $style-stroke-width-s solid var(--theme-elevation-150);
     position: sticky;
     z-index: 1;
-    top: base(4);
+    top: var(--doc-controls-height);
   }
 
   &__toolbar-wrap {
diff --git a/test/_community/.gitignore b/test/_community/.gitignore
new file mode 100644
index 0000000000..cce01755f4
--- /dev/null
+++ b/test/_community/.gitignore
@@ -0,0 +1,2 @@
+/media
+/media-gif
diff --git a/test/admin/components/AfterDashboard/index.scss b/test/admin/components/AfterDashboard/index.scss
index 7586da2885..dcf11b187b 100644
--- a/test/admin/components/AfterDashboard/index.scss
+++ b/test/admin/components/AfterDashboard/index.scss
@@ -1,3 +1,20 @@
 .after-dashboard {
   border-top: 1px solid var(--theme-elevation-100);
+  padding-top: var(--base);
+
+  & > * {
+    margin: 0;
+
+    &:not(:last-child) {
+      margin-bottom: calc(var(--base) / 2);
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
diff --git a/test/admin/components/CustomTabComponent/index.scss b/test/admin/components/CustomTabComponent/index.scss
index 5418e91d41..79ba21e84e 100644
--- a/test/admin/components/CustomTabComponent/index.scss
+++ b/test/admin/components/CustomTabComponent/index.scss
@@ -3,6 +3,7 @@
   background-color: var(--theme-elevation-200);
   padding: 0 6px;
   border-radius: 2px;
+  white-space: nowrap;
 
   &:hover {
     background-color: var(--theme-elevation-300);
diff --git a/test/admin/components/DemoUIField/Field.tsx b/test/admin/components/DemoUIField/Field.tsx
index 1576386ca0..002b80d49f 100644
--- a/test/admin/components/DemoUIField/Field.tsx
+++ b/test/admin/components/DemoUIField/Field.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-const DemoUIField: React.FC = () => <p>Demo UI Field</p>
+const DemoUIField: React.FC = () => <p className="field-type">Demo UI Field</p>
 
 export default DemoUIField
diff --git a/test/admin/config.ts b/test/admin/config.ts
index 8ba60e47bb..5e7182d09e 100644
--- a/test/admin/config.ts
+++ b/test/admin/config.ts
@@ -17,7 +17,7 @@ import CustomDefaultView from './components/views/CustomDefault'
 import CustomEditView from './components/views/CustomEdit'
 import CustomVersionsView from './components/views/CustomVersions'
 import CustomView from './components/views/CustomView'
-import { globalSlug, slug } from './shared'
+import { globalSlug, slug, slugPluralLabel, slugSingularLabel } from './shared'
 
 export interface Post {
   createdAt: Date
@@ -90,6 +90,10 @@ export default buildConfigWithDefaults({
     },
     {
       slug,
+      labels: {
+        singular: slugSingularLabel,
+        plural: slugPluralLabel,
+      },
       admin: {
         description: 'Description',
         listSearchableFields: ['title', 'description', 'number'],
@@ -134,6 +138,13 @@ export default buildConfigWithDefaults({
             },
           },
         },
+        {
+          name: 'sidebarField',
+          type: 'text',
+          admin: {
+            position: 'sidebar',
+          },
+        },
       ],
     },
     {
@@ -273,6 +284,13 @@ export default buildConfigWithDefaults({
           name: 'title',
           type: 'text',
         },
+        {
+          name: 'sidebarField',
+          type: 'text',
+          admin: {
+            position: 'sidebar',
+          },
+        },
       ],
     },
 
diff --git a/test/admin/e2e.spec.ts b/test/admin/e2e.spec.ts
index f8cd2a9075..6fadbc1445 100644
--- a/test/admin/e2e.spec.ts
+++ b/test/admin/e2e.spec.ts
@@ -8,10 +8,16 @@ import type { Post } from './config'
 import payload from '../../packages/payload/src'
 import { mapAsync } from '../../packages/payload/src/utilities/mapAsync'
 import wait from '../../packages/payload/src/utilities/wait'
-import { openDocControls, openMainMenu, saveDocAndAssert, saveDocHotkeyAndAssert } from '../helpers'
+import {
+  exactText,
+  openDocControls,
+  openMainMenu,
+  saveDocAndAssert,
+  saveDocHotkeyAndAssert,
+} from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
-import { globalSlug, slug } from './shared'
+import { globalSlug, slug, slugPluralLabel } from './shared'
 
 const { afterEach, beforeAll, beforeEach, describe } = test
 
@@ -115,9 +121,10 @@ describe('admin', () => {
 
     test('breadcrumbs - from document to collection', async () => {
       const { id } = await createPost()
-
       await page.goto(url.edit(id))
-      await page.locator(`.step-nav >> text=${slug}`).click()
+      const collectionBreadcrumb = page.locator(`.step-nav a[href="/admin/collections/${slug}"]`)
+      await expect(collectionBreadcrumb).toBeVisible()
+      await expect(collectionBreadcrumb).toHaveText(slugPluralLabel)
       expect(page.url()).toContain(url.list)
     })
 
@@ -274,7 +281,7 @@ describe('admin', () => {
   })
 
   describe('list view', () => {
-    const tableRowLocator = 'table >> tbody >> tr'
+    const tableRowLocator = 'table > tbody > tr'
 
     beforeEach(async () => {
       await page.goto(url.list)
@@ -302,33 +309,37 @@ describe('admin', () => {
       })
 
       test('toggle columns', async () => {
-        const columnCountLocator = 'table >> thead >> tr >> th'
+        const columnCountLocator = 'table > thead > tr > th'
         await createPost()
 
         await page.locator('.list-controls__toggle-columns').click()
 
-        // wait until the column toggle UI is visible and fully expanded
-        await expect(page.locator('.list-controls__columns.rah-static--height-auto')).toBeVisible()
-
+        // track the number of columns before manipulating toggling any
         const numberOfColumns = await page.locator(columnCountLocator).count()
-        await expect(page.locator('table >> thead >> tr >> th:nth-child(2)')).toHaveText('ID')
 
-        const idButton = page.locator('.column-selector >> text=ID')
+        // wait until the column toggle UI is visible and fully expanded
+        await expect(page.locator('.column-selector')).toBeVisible()
+        await expect(page.locator('table > thead > tr > th:nth-child(2)')).toHaveText('ID')
+
+        const idButton = page.locator(`.column-selector .column-selector__column`, {
+          hasText: exactText('ID'),
+        })
 
         // Remove ID column
         await idButton.click()
+
         // wait until .cell-id is not present on the page:
         await page.locator('.cell-id').waitFor({ state: 'detached' })
 
         await expect(page.locator(columnCountLocator)).toHaveCount(numberOfColumns - 1)
-        await expect(page.locator('table >> thead >> tr >> th:nth-child(2)')).toHaveText('Number')
+        await expect(page.locator('table > thead > tr > th:nth-child(2)')).toHaveText('Number')
 
         // Add back ID column
         await idButton.click()
         await expect(page.locator('.cell-id')).toBeVisible()
 
         await expect(page.locator(columnCountLocator)).toHaveCount(numberOfColumns)
-        await expect(page.locator('table >> thead >> tr >> th:nth-child(2)')).toHaveText('ID')
+        await expect(page.locator('table > thead > tr > th:nth-child(2)')).toHaveText('ID')
       })
 
       test('2nd cell is a link', async () => {
@@ -342,7 +353,12 @@ describe('admin', () => {
         await expect(page.locator('.list-controls__columns.rah-static--height-auto')).toBeVisible()
 
         // toggle off the ID column
-        await page.locator('.column-selector >> text=ID').click()
+        await page
+          .locator('.column-selector .column-selector__column', {
+            hasText: exactText('ID'),
+          })
+          .click()
+
         // wait until .cell-id is not present on the page:
         await page.locator('.cell-id').waitFor({ state: 'detached' })
 
@@ -356,12 +372,18 @@ describe('admin', () => {
 
         // open the column controls
         await page.locator('.list-controls__toggle-columns').click()
+
         // wait until the column toggle UI is visible and fully expanded
-        await expect(page.locator('.list-controls__columns.rah-static--height-auto')).toBeVisible()
+        await expect(page.locator('.column-selector')).toBeVisible()
+        await expect(page.locator('table > thead > tr > th:nth-child(2)')).toHaveText('ID')
 
         // ensure the ID column is active
-        const idButton = page.locator('.column-selector >> text=ID')
+        const idButton = page.locator('.column-selector .column-selector__column', {
+          hasText: exactText('ID'),
+        })
+
         const buttonClasses = await idButton.getAttribute('class')
+
         if (buttonClasses && !buttonClasses.includes('column-selector__column--active')) {
           await idButton.click()
           await expect(page.locator(tableRowLocator).first().locator('.cell-id')).toBeVisible()
@@ -376,7 +398,7 @@ describe('admin', () => {
         await page.locator('.where-builder__add-first-filter').click()
 
         const operatorField = page.locator('.condition__operator')
-        const valueField = page.locator('.condition__value >> input')
+        const valueField = page.locator('.condition__value > input')
 
         await operatorField.click()
 
@@ -481,9 +503,17 @@ describe('admin', () => {
         await expect(page.locator('.list-controls__columns.rah-static--height-auto')).toBeVisible()
 
         const numberBoundingBox = await page
-          .locator('.column-selector >> text=Number')
+          .locator(`.column-selector .column-selector__column`, {
+            hasText: exactText('Number'),
+          })
+
+          .boundingBox()
+
+        const idBoundingBox = await page
+          .locator(`.column-selector .column-selector__column`, {
+            hasText: exactText('ID'),
+          })
           .boundingBox()
-        const idBoundingBox = await page.locator('.column-selector >> text=ID').boundingBox()
 
         if (!numberBoundingBox || !idBoundingBox) return
 
@@ -541,7 +571,10 @@ describe('admin', () => {
         await collectionSelector.click()
         await page
           .locator(
-            '[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post"',
+            '[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option',
+            {
+              hasText: exactText('Post'),
+            },
           )
           .click()
 
@@ -582,7 +615,10 @@ describe('admin', () => {
         // deselect the "id" column
         await page
           .locator(
-            '[id^=list-drawer_1_] .list-controls .column-selector .column-selector__column >> text=ID',
+            '[id^=list-drawer_1_] .list-controls .column-selector .column-selector__column',
+            {
+              hasText: exactText('ID'),
+            },
           )
           .click()
 
@@ -590,14 +626,20 @@ describe('admin', () => {
         await collectionSelector.click()
         await page
           .locator(
-            '[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post"',
+            '[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option',
+            {
+              hasText: exactText('Post'),
+            },
           )
           .click()
 
         // deselect the "number" column
         await page
           .locator(
-            '[id^=list-drawer_1_] .list-controls .column-selector .column-selector__column >> text=Number',
+            '[id^=list-drawer_1_] .list-controls .column-selector .column-selector__column',
+            {
+              hasText: exactText('Number'),
+            },
           )
           .click()
 
@@ -605,7 +647,10 @@ describe('admin', () => {
         await collectionSelector.click()
         await page
           .locator(
-            '[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="User"',
+            '[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option',
+            {
+              hasText: exactText('User'),
+            },
           )
           .click()
 
@@ -620,9 +665,13 @@ describe('admin', () => {
 
         // select the "Post" collection again
         await collectionSelector.click()
+
         await page
           .locator(
-            '[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option >> text="Post"',
+            '[id^=list-drawer_1_] .list-drawer__select-collection.react-select .rs__option',
+            {
+              hasText: exactText('Post'),
+            },
           )
           .click()
 
@@ -639,7 +688,11 @@ describe('admin', () => {
       test('should render custom table cell component', async () => {
         await createPost()
         await page.goto(url.list)
-        await expect(page.locator('table >> thead >> tr >> th >> text=Demo UI Field')).toBeVisible()
+        await expect(
+          page.locator('table > thead > tr > th', {
+            hasText: exactText('Demo UI Field'),
+          }),
+        ).toBeVisible()
       })
     })
 
@@ -651,18 +704,18 @@ describe('admin', () => {
       })
 
       test('should select multiple rows', async () => {
-        const selectAll = page.locator('.custom-checkbox:has(#select-all)')
+        const selectAll = page.locator('.checkbox-input:has(#select-all)')
         await page.locator('.row-1 .cell-_select input').check()
 
-        const indeterminateSelectAll = selectAll.locator('.custom-checkbox__icon.partial')
+        const indeterminateSelectAll = selectAll.locator('.checkbox-input__icon.partial')
         expect(indeterminateSelectAll).toBeDefined()
 
         await selectAll.locator('input').click()
-        const emptySelectAll = selectAll.locator('.custom-checkbox__icon:not(.check):not(.partial)')
+        const emptySelectAll = selectAll.locator('.checkbox-input__icon:not(.check):not(.partial)')
         await expect(emptySelectAll).toHaveCount(0)
 
         await selectAll.locator('input').click()
-        const checkSelectAll = selectAll.locator('.custom-checkbox__icon.check')
+        const checkSelectAll = selectAll.locator('.checkbox-input__icon.check')
         expect(checkSelectAll).toBeDefined()
       })
 
@@ -766,7 +819,11 @@ describe('admin', () => {
 
         // column controls
         await page.locator('.list-controls__toggle-columns').click()
-        await expect(page.locator('.column-selector__column >> text=Title')).toHaveText('Title')
+        await expect(
+          page.locator('.column-selector__column', {
+            hasText: exactText('Title'),
+          }),
+        ).toHaveText('Title')
 
         // filters
         await page.locator('.list-controls__toggle-where').click()
@@ -791,7 +848,11 @@ describe('admin', () => {
         await page.goto(url.list)
         await page.locator('.list-controls__toggle-columns').click()
         // expecting the label to fall back to english as default fallbackLng
-        await expect(page.locator('.column-selector__column >> text=Title')).toHaveText('Title')
+        await expect(
+          page.locator('.column-selector__column', {
+            hasText: exactText('Title'),
+          }),
+        ).toHaveText('Title')
       })
     })
   })
diff --git a/test/admin/shared.ts b/test/admin/shared.ts
index d6f7ac67f5..0b50251539 100644
--- a/test/admin/shared.ts
+++ b/test/admin/shared.ts
@@ -1,2 +1,7 @@
 export const slug = 'posts'
+
+export const slugSingularLabel = 'Post'
+
+export const slugPluralLabel = 'Posts'
+
 export const globalSlug = 'global'
diff --git a/test/auth/config.ts b/test/auth/config.ts
index 6d593e142d..94d02885ca 100644
--- a/test/auth/config.ts
+++ b/test/auth/config.ts
@@ -44,6 +44,7 @@ export default buildConfigWithDefaults({
         },
         {
           name: 'namedSaveToJWT',
+          label: 'Named Save To JWT',
           type: 'text',
           defaultValue: namedSaveToJWTValue,
           saveToJWT: saveToJWTKey,
@@ -54,6 +55,7 @@ export default buildConfigWithDefaults({
           fields: [
             {
               name: 'liftedSaveToJWT',
+              label: 'Lifted Save To JWT',
               type: 'text',
               saveToJWT: 'x-lifted-from-group',
               defaultValue: 'lifted from group',
@@ -62,17 +64,20 @@ export default buildConfigWithDefaults({
         },
         {
           name: 'groupSaveToJWT',
+          label: 'Group Save To JWT',
           type: 'group',
           saveToJWT: 'x-group',
           fields: [
             {
               name: 'saveToJWTString',
+              label: 'Save To JWT String',
               type: 'text',
               saveToJWT: 'x-test',
               defaultValue: 'nested property',
             },
             {
               name: 'saveToJWTFalse',
+              label: 'Save To JWT False',
               type: 'text',
               saveToJWT: false,
               defaultValue: 'nested property',
@@ -84,6 +89,7 @@ export default buildConfigWithDefaults({
           tabs: [
             {
               name: 'saveToJWTTab',
+              label: 'Save To JWT Tab',
               saveToJWT: true,
               fields: [
                 {
@@ -96,6 +102,7 @@ export default buildConfigWithDefaults({
             },
             {
               name: 'tabSaveToJWTString',
+              label: 'Tab Save To JWT String',
               saveToJWT: 'tab-test',
               fields: [
                 {
@@ -110,18 +117,21 @@ export default buildConfigWithDefaults({
               fields: [
                 {
                   name: 'tabLiftedSaveToJWT',
+                  label: 'Tab Lifted Save To JWT',
                   type: 'text',
                   saveToJWT: true,
                   defaultValue: 'lifted from unnamed tab',
                 },
                 {
                   name: 'unnamedTabSaveToJWTString',
+                  label: 'Unnamed Tab Save To JWT String',
                   type: 'text',
                   saveToJWT: 'x-tab-field',
                   defaultValue: 'text',
                 },
                 {
                   name: 'unnamedTabSaveToJWTFalse',
+                  label: 'Unnamed Tab Save To JWT False',
                   type: 'text',
                   saveToJWT: false,
                   defaultValue: 'false',
@@ -149,6 +159,10 @@ export default buildConfigWithDefaults({
     },
     {
       slug: 'api-keys',
+      labels: {
+        singular: 'API Key',
+        plural: 'API Keys',
+      },
       access: {
         read: ({ req: { user } }) => {
           if (user.collection === 'api-keys') {
diff --git a/test/field-error-states/e2e.spec.ts b/test/field-error-states/e2e.spec.ts
index d27496a822..056609cda8 100644
--- a/test/field-error-states/e2e.spec.ts
+++ b/test/field-error-states/e2e.spec.ts
@@ -20,26 +20,20 @@ describe('field error states', () => {
     await page.goto(`${serverURL}/admin/collections/error-fields/create`)
 
     // add parent array
-    await page.locator('#field-parentArray > .array-field__add-button-wrap > button').click()
+    await page.locator('#field-parentArray > .array-field__add-row').click()
 
     // add first child array
-    await page
-      .locator('#parentArray-row-0 .collapsible__content .array-field__add-button-wrap > button')
-      .click()
+    await page.locator('#parentArray-row-0 .collapsible__content .array-field__add-row').click()
     await page.locator('#field-parentArray__0__childArray__0__childArrayText').focus()
     await page.keyboard.type('T1')
 
     // add second child array
-    await page
-      .locator('#parentArray-row-0 .collapsible__content .array-field__add-button-wrap > button')
-      .click()
+    await page.locator('#parentArray-row-0 .collapsible__content .array-field__add-row').click()
     await page.locator('#field-parentArray__0__childArray__1__childArrayText').focus()
     await page.keyboard.type('T2')
 
     // add third child array
-    await page
-      .locator('#parentArray-row-0 .collapsible__content .array-field__add-button-wrap > button')
-      .click()
+    await page.locator('#parentArray-row-0 .collapsible__content .array-field__add-row').click()
     await page.locator('#parentArray-0-childArray-row-2 .array-actions__button').click()
     await page
       .locator('#parentArray-0-childArray-row-2 .array-actions__action.array-actions__remove')
diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
index fc5339e9af..e661b4028d 100644
--- a/test/fields/e2e.spec.ts
+++ b/test/fields/e2e.spec.ts
@@ -287,9 +287,7 @@ describe('fields', () => {
     test('should render CollapsibleLabel using a component', async () => {
       const label = 'custom row label as component'
       await page.goto(url.create)
-      await page
-        .locator('#field-arrayWithCollapsibles >> .array-field__add-button-wrap >> button')
-        .click()
+      await page.locator('#field-arrayWithCollapsibles >> .array-field__add-row').click()
 
       await page
         .locator(
@@ -447,9 +445,7 @@ describe('fields', () => {
     test('should render RowLabel using a function', async () => {
       const label = 'custom row label as function'
       await page.goto(url.create)
-      await page
-        .locator('#field-rowLabelAsFunction >> .array-field__add-button-wrap >> button')
-        .click()
+      await page.locator('#field-rowLabelAsFunction >> .array-field__add-row').click()
 
       await page.locator('#field-rowLabelAsFunction__0__title').fill(label)
       await wait(100)
@@ -460,9 +456,7 @@ describe('fields', () => {
     test('should render RowLabel using a component', async () => {
       const label = 'custom row label as component'
       await page.goto(url.create)
-      await page
-        .locator('#field-rowLabelAsComponent >> .array-field__add-button-wrap >> button')
-        .click()
+      await page.locator('#field-rowLabelAsComponent >> .array-field__add-row').click()
 
       await page.locator('#field-rowLabelAsComponent__0__title').fill(label)
       await wait(100)
@@ -476,12 +470,8 @@ describe('fields', () => {
       test('should add 2 new rows', async () => {
         await page.goto(url.create)
 
-        await page
-          .locator('#field-potentiallyEmptyArray > .array-field__add-button-wrap > button')
-          .click()
-        await page
-          .locator('#field-potentiallyEmptyArray > .array-field__add-button-wrap > button')
-          .click()
+        await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
+        await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
         await page.locator('#field-potentiallyEmptyArray__0__text').fill('array row 1')
         await page.locator('#field-potentiallyEmptyArray__1__text').fill('array row 2')
 
@@ -491,12 +481,8 @@ describe('fields', () => {
       test('should remove 2 new rows', async () => {
         await page.goto(url.create)
 
-        await page
-          .locator('#field-potentiallyEmptyArray > .array-field__add-button-wrap > button')
-          .click()
-        await page
-          .locator('#field-potentiallyEmptyArray > .array-field__add-button-wrap > button')
-          .click()
+        await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
+        await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
         await page.locator('#field-potentiallyEmptyArray__0__text').fill('array row 1')
         await page.locator('#field-potentiallyEmptyArray__1__text').fill('array row 2')
 
@@ -509,23 +495,17 @@ describe('fields', () => {
           .locator('#potentiallyEmptyArray-row-0 .popup__scroll .array-actions__remove')
           .click()
 
-        const rowsContainer = page.locator(
+        const rows = await page.locator(
           '#field-potentiallyEmptyArray > .array-field__draggable-rows',
         )
-        const directChildDivCount = await rowsContainer.evaluate((element) => {
-          const childDivCount = element.querySelectorAll(':scope > div')
-          return childDivCount.length
-        })
 
-        expect(directChildDivCount).toBe(0)
+        expect(rows).not.toBeVisible()
       })
 
       test('should remove existing row', async () => {
         await page.goto(url.create)
 
-        await page
-          .locator('#field-potentiallyEmptyArray > .array-field__add-button-wrap > button')
-          .click()
+        await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
         await page.locator('#field-potentiallyEmptyArray__0__text').fill('array row 1')
 
         await saveDocAndAssert(page)
@@ -537,26 +517,18 @@ describe('fields', () => {
           )
           .click()
 
-        const rowsContainer = page.locator(
+        const rows = await page.locator(
           '#field-potentiallyEmptyArray > .array-field__draggable-rows',
         )
-        const directChildDivCount = await rowsContainer.evaluate((element) => {
-          const childDivCount = element.querySelectorAll(':scope > div')
-          return childDivCount.length
-        })
 
-        expect(directChildDivCount).toBe(0)
+        expect(rows).not.toBeVisible()
       })
 
       test('should add row after removing existing row', async () => {
         await page.goto(url.create)
 
-        await page
-          .locator('#field-potentiallyEmptyArray > .array-field__add-button-wrap > button')
-          .click()
-        await page
-          .locator('#field-potentiallyEmptyArray > .array-field__add-button-wrap > button')
-          .click()
+        await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
+        await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
         await page.locator('#field-potentiallyEmptyArray__0__text').fill('array row 1')
         await page.locator('#field-potentiallyEmptyArray__1__text').fill('array row 2')
 
@@ -568,9 +540,7 @@ describe('fields', () => {
             '#potentiallyEmptyArray-row-1 .popup__scroll .array-actions__action.array-actions__remove',
           )
           .click()
-        await page
-          .locator('#field-potentiallyEmptyArray > .array-field__add-button-wrap > button')
-          .click()
+        await page.locator('#field-potentiallyEmptyArray > .array-field__add-row').click()
 
         await page.locator('#field-potentiallyEmptyArray__1__text').fill('updated array row 2')
 
diff --git a/test/helpers.ts b/test/helpers.ts
index 88d85d8625..a95abcb047 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -78,3 +78,7 @@ export async function changeLocale(page: Page, newLocale: string) {
   await page.locator(`.localizer >> a:has-text("${newLocale}")`).click()
   expect(page.url()).toContain(`locale=${newLocale}`)
 }
+
+export function exactText(text: string) {
+  return new RegExp(`^${text}$`)
+}
diff --git a/test/refresh-permissions/e2e.spec.ts b/test/refresh-permissions/e2e.spec.ts
index 7b64f1c3ba..b47967f229 100644
--- a/test/refresh-permissions/e2e.spec.ts
+++ b/test/refresh-permissions/e2e.spec.ts
@@ -32,7 +32,7 @@ describe('refresh-permissions', () => {
     await closeMainMenu(page)
 
     // Allow access to test global.
-    await page.locator('.custom-checkbox:has(#field-test) input').check()
+    await page.locator('.checkbox-input:has(#field-test) input').check()
     await page.locator('#action-save').click()
 
     await openMainMenu(page)
diff --git a/test/versions/collections/Posts.ts b/test/versions/collections/Posts.ts
new file mode 100644
index 0000000000..182d8cf2b2
--- /dev/null
+++ b/test/versions/collections/Posts.ts
@@ -0,0 +1,21 @@
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+
+import { draftSlug, postSlug, versionSlug } from '../shared'
+
+const Posts: CollectionConfig = {
+  slug: postSlug,
+  fields: [
+    {
+      name: 'relationToVersions',
+      type: 'relationship',
+      relationTo: versionSlug,
+    },
+    {
+      name: 'relationToDrafts',
+      type: 'relationship',
+      relationTo: draftSlug,
+    },
+  ],
+}
+
+export default Posts
diff --git a/test/versions/config.ts b/test/versions/config.ts
index 81a0db5769..93abb6a26b 100644
--- a/test/versions/config.ts
+++ b/test/versions/config.ts
@@ -2,13 +2,14 @@ import { buildConfigWithDefaults } from '../buildConfigWithDefaults'
 import { devUser } from '../credentials'
 import AutosavePosts from './collections/Autosave'
 import DraftPosts from './collections/Drafts'
+import Posts from './collections/Posts'
 import VersionPosts from './collections/Versions'
 import AutosaveGlobal from './globals/Autosave'
 import DraftGlobal from './globals/Draft'
 import { draftSlug } from './shared'
 
 export default buildConfigWithDefaults({
-  collections: [AutosavePosts, DraftPosts, VersionPosts],
+  collections: [Posts, AutosavePosts, DraftPosts, VersionPosts],
   globals: [AutosaveGlobal, DraftGlobal],
   localization: {
     locales: ['en', 'es'],
diff --git a/test/versions/e2e.spec.ts b/test/versions/e2e.spec.ts
index dfa03ee6c7..da401ec7cc 100644
--- a/test/versions/e2e.spec.ts
+++ b/test/versions/e2e.spec.ts
@@ -56,7 +56,7 @@ describe('versions', () => {
     test('should bulk publish', async () => {
       await page.goto(url.list)
 
-      await page.locator('.custom-checkbox:has(#select-all) input').check()
+      await page.locator('.checkbox-input:has(#select-all) input').check()
 
       await page.locator('.publish-many__toggle').click()
 
@@ -69,7 +69,7 @@ describe('versions', () => {
     test('should bulk unpublish', async () => {
       await page.goto(url.list)
 
-      await page.locator('.custom-checkbox:has(#select-all) input').check()
+      await page.locator('.checkbox-input:has(#select-all) input').check()
 
       await page.locator('.unpublish-many__toggle').click()
 
@@ -82,7 +82,7 @@ describe('versions', () => {
     test('should publish while editing many', async () => {
       const description = 'published document'
       await page.goto(url.list)
-      await page.locator('.custom-checkbox:has(#select-all) input').check()
+      await page.locator('.checkbox-input:has(#select-all) input').check()
       await page.locator('.edit-many__toggle').click()
       await page.locator('.field-select .rs__control').click()
       const options = page.locator('.rs__option')
@@ -101,7 +101,7 @@ describe('versions', () => {
     test('should save as draft while editing many', async () => {
       const description = 'draft document'
       await page.goto(url.list)
-      await page.locator('.custom-checkbox:has(#select-all) input').check()
+      await page.locator('.checkbox-input:has(#select-all) input').check()
       await page.locator('.edit-many__toggle').click()
       await page.locator('.field-select .rs__control').click()
       const options = page.locator('.rs__option')
diff --git a/test/versions/shared.ts b/test/versions/shared.ts
index 09a327c74f..92d441b2f0 100644
--- a/test/versions/shared.ts
+++ b/test/versions/shared.ts
@@ -1,3 +1,4 @@
+export const postSlug = 'posts'
 export const draftSlug = 'draft-posts'
 export const autosaveSlug = 'autosave-posts'
 export const versionSlug = 'version-posts'