chore: adjusts admin UI styling (#7557)

## Description

- Improves mobile styling of Payload admin UI.
- Reduces font size on dashboard cards.
- Improves the block/collapsible/array field styling.

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

## Type of change

<!-- Please delete options that are not relevant. -->

- [x] Chore (non-breaking change which does not add functionality)

## Checklist:

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

packages/next/src/elements/DocumentHeader/Tabs/index.scss

@@ -37,7 +37,6 @@
 
     &__tabs {
       padding: 0;
-      margin-left: var(--gutter-h);
     }
   }
 

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

@@ -40,8 +40,6 @@
 
     &__title {
       width: 100%;
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
     }
   }
 

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

@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--base);
+    padding: base(2);
   }
 
   &__content {

packages/next/src/elements/Nav/index.client.tsx

@@ -98,11 +98,7 @@ export const DefaultNavClient: React.FC = () => {
                   key={i}
                   tabIndex={!navOpen ? -1 : undefined}
                 >
-                  {activeCollection && (
+                  {activeCollection && <div className={`${baseClass}__link-indicator`} />}
-                    <span className={`${baseClass}__link-icon`}>
-                      <ChevronIcon direction="right" />
-                    </span>
-                  )}
                   <span className={`${baseClass}__link-label`}>{entityLabel}</span>
                 </LinkElement>
               )

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

@@ -10,6 +10,7 @@
   border-right: 1px solid var(--theme-elevation-100);
   opacity: 0;
   transition: opacity var(--nav-trans-time) ease-in-out;
+  overflow: hidden;
 
   &--nav-open {
     opacity: 1;
@@ -18,7 +19,7 @@
   &__header {
     position: absolute;
     top: 0;
-    width: 100%;
+    width: 100vw;
     height: var(--app-header-height);
   }
 
@@ -26,6 +27,7 @@
     z-index: 1;
     position: relative;
     height: 100%;
+    width: 100%;
   }
 
   &__mobile-close {
@@ -33,7 +35,7 @@
     background: none;
     border: 0;
     outline: 0;
-    padding: calc(var(--base) * 0.75) var(--gutter-h);
+    padding: base(0.8) 0;
   }
 
   &__scroll {
@@ -85,7 +87,9 @@
   nav {
     a {
       position: relative;
-      padding: base(0.125) base(1.5) base(0.125) 0;
+      padding-block: base(0.125);
+      padding-inline-start: 0;
+      padding-inline-end: base(1.5);
       display: flex;
       text-decoration: none;
 
@@ -112,10 +116,16 @@
     align-items: center;
   }
 
-  &__link-icon {
+  &__link-indicator {
-    margin-right: calc(var(--base) * 0.25);
+    position: absolute;
-    top: -1px;
+    display: block;
-    position: relative;
+    // top: 0;
+    inset-inline-start: base(-1);
+    width: 2px;
+    height: 16px;
+    border-start-end-radius: 2px;
+    border-end-end-radius: 2px;
+    background: var(--theme-text);
   }
 
   @include mid-break {

packages/next/src/scss/app.scss

@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
-  --doc-controls-height: calc(var(--base) * 3);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
+    --app-header-height: calc(var(--base) * 2.4);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }

packages/next/src/scss/type.scss

@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {

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

@@ -111,8 +111,7 @@
       position: relative;
       width: 100%;
       top: 0;
-      padding-right: var(--gutter-h);
+      padding-inline-end: var(--gutter-h);
-      padding-left: var(--gutter-h);
     }
   }
 }

packages/next/src/views/List/Default/index.scss

@@ -15,7 +15,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: base(0.75);
+    gap: base(0.8);
 
     h1 {
       margin: 0;
@@ -95,18 +95,18 @@
     position: fixed;
     bottom: 0;
     z-index: 10;
-    padding: base(0.75) 0;
+    padding: base(0.8) 0;
     width: 100%;
     background-color: var(--theme-bg);
 
     .btn {
-      margin: 0 0 0 base(0.5);
+      margin: 0 0 0 base(0.4);
     }
 
     .btn {
       background-color: var(--theme-elevation-100);
       cursor: pointer;
-      padding: 0 base(0.25);
+      padding: 0 base(0.4);
       border-radius: $style-radius-s;
 
       &:hover {
@@ -180,13 +180,6 @@
   }
 
   @include small-break {
-    margin-top: 0;
+    margin-bottom: base(2.4);
-    margin-bottom: base(3);
-
-    &__header {
-      .pill {
-        top: -6px;
-      }
-    }
   }
 }

packages/richtext-lexical/src/features/blocks/component/index.scss

@@ -9,9 +9,13 @@
   display: flex;
   flex-direction: column;
   gap: calc(var(--base) / 2);
-  font-family: var(
+  @extend %body;
-    --font-body
+
-  ); // Reset font to non-serif, body font, as the lexical editor parent uses a serif font.
+  &__row {
+    .collapsible__toggle-wrap {
+      padding-inline-start: base(0.4);
+    }
+  }
 
   margin: 0 0 1.5em;
 

packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss

@@ -2,7 +2,7 @@
 
 html[data-theme='light'] {
   .slash-menu-popup {
-    @include shadow-m;
+    @include shadow-lg;
   }
 }
 

packages/richtext-lexical/src/scss/app.scss

@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
-  --doc-controls-height: calc(var(--base) * 3);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
+    --app-header-height: calc(var(--base) * 2.4);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }

packages/richtext-lexical/src/scss/type.scss

@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {

packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss

@@ -35,11 +35,11 @@
     height: base(1);
 
     svg {
-      width: base(2.75);
+      width: base(2);
-      height: base(2.75);
+      height: base(2);
       position: relative;
-      left: base(-0.825);
+      inset-inline-start: base(-0.5);
-      top: base(-0.825);
+      top: base(-0.5);
 
       .stroke {
         stroke-width: 2px;

packages/richtext-slate/src/scss/app.scss

@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
-  --doc-controls-height: calc(var(--base) * 3);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
+    --app-header-height: calc(var(--base) * 2.4);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }

packages/richtext-slate/src/scss/type.scss

@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {

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

@@ -57,7 +57,7 @@
     height: 100%;
     flex-grow: 1;
     justify-content: space-between;
-    overflow: hidden;
+    width: 100%;
   }
 
   &__account {
@@ -90,12 +90,14 @@
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
+    width: 100%;
   }
 
   &__step-nav-wrapper {
-    flex: 1;
+    flex-grow: 0;
     overflow: auto;
     display: flex;
+    width: 100%;
 
     &::-webkit-scrollbar {
       display: none;
@@ -156,7 +158,7 @@
   }
 
   @include small-break {
-    &__localizer {
+    &__localizer.localizer {
       right: base(2);
     }
 

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

@@ -17,12 +17,12 @@
   gap: base(0.8);
 
   &__title {
-    @extend %h4;
+    @extend %h5;
     letter-spacing: 0;
     font-weight: 600;
-    line-height: base(1.2);
+    line-height: base(0.8);
     width: 100%;
-    margin: 0;
+    margin: base(0.1) 0;
   }
 
   &__actions {

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

@@ -17,9 +17,10 @@
     gap: base(0.2);
     border-top-right-radius: $style-radius-m;
     border-top-left-radius: $style-radius-m;
+    width: 100%;
 
     & > * {
-      z-index: 2;
+      z-index: 1;
     }
 
     &:has(.collapsible__drag) {
@@ -87,6 +88,8 @@
     left: 0;
     pointer-events: none;
     width: 100%;
+    overflow: hidden;
+    max-width: 100%;
   }
 
   &__header-wrap--has-drag-handle {

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

@@ -6,6 +6,7 @@
   align-items: center;
   height: 100%;
   justify-content: center;
+  padding: base(2);
 
   &__template {
     z-index: 1;

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

@@ -6,6 +6,7 @@
   align-items: center;
   height: 100%;
   justify-content: center;
+  padding: base(2);
 
   &__template {
     z-index: 1;

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

@@ -24,7 +24,7 @@
     position: relative;
     width: 100%;
     display: flex;
-    align-items: center;
+    align-items: space-between;
     gap: var(--base);
     padding-bottom: 1px;
     z-index: 4;
@@ -36,6 +36,7 @@
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
+    padding: base(0.8) 0;
   }
 
   &__meta {
@@ -46,6 +47,10 @@
     gap: var(--base);
     margin: 0;
     width: 100%;
+
+    & button {
+      margin: 0;
+    }
   }
 
   &__list-item {
@@ -64,6 +69,7 @@
     white-space: nowrap;
     margin: 0;
     font-weight: 600;
+    line-height: base(1.2);
   }
 
   &__label {
@@ -141,7 +147,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 equal to the meta height plus top padding
-    top: calc(var(--base) * -2);
+    top: base(-2.8);
     padding-right: 0;
     padding-left: 0;
 
@@ -154,8 +160,7 @@
     &__content {
       width: 100%;
       overflow: auto;
-      height: calc(var(--base) * 2);
+      padding-inline: base(2);
-
       // this container has a fixed height
       // this means the scrollbar (when present) overlaps the content
       &::-webkit-scrollbar {
@@ -166,14 +171,13 @@
     &__meta {
       width: auto;
       gap: calc(var(--base) / 2);
-      margin-left: var(--gutter-h);
 
       &::after {
         content: '';
         display: block;
-        position: sticky;
+        position: absolute;
         right: 0;
-        width: calc(var(--base) * 2);
+        width: base(0.8);
         height: var(--base);
         background: linear-gradient(to right, transparent, var(--theme-bg));
         flex-shrink: 0;
@@ -183,6 +187,7 @@
     }
 
     &__controls-wrapper {
+      background-color: var(--theme-bg);
       width: 100%;
       transform: translate3d(0, 0, 0);
       padding-right: var(--gutter-h);
@@ -215,4 +220,10 @@
       }
     }
   }
+
+  @include small-break {
+    &__content {
+      padding-inline: base(0.8);
+    }
+  }
 }

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

@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     height: 100%;
+    padding: base(2);
 
     .btn {
       margin-right: $baseline;

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

@@ -63,17 +63,11 @@
       height: base(1);
 
       svg {
-        width: base(2.75);
+        width: base(2);
-        height: base(2.75);
+        height: base(2);
         position: relative;
-        [dir='ltr'] & {
+        inset-inline-start: base(-0.5);
-          left: base(-0.825);
+        top: base(-0.5);
-        }
-
-        [dir='rtl'] & {
-          right: base(-0.825);
-        }
-        top: base(-0.825);
 
         .stroke {
           stroke-width: 2px;

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

@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     position: relative;

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

@@ -48,10 +48,22 @@
     &__wrap {
       flex-wrap: wrap;
       background-color: unset;
+      padding: 0;
+      position: relative;
+    }
+
+    .icon--search {
+      position: absolute;
+      top: base(0.4);
+      inset-inline-start: base(0.4);
+      z-index: 1;
     }
 
     .search-filter {
       width: 100%;
+      input {
+        padding: base(0.4) base(2);
+      }
     }
 
     &__buttons-wrap {
@@ -64,11 +76,8 @@
       }
 
       .pill {
-        padding: base(0.5) base(1);
+        padding: base(0.2) base(0.2) base(0.2) base(0.4);
-
+        justify-content: space-between;
-        svg {
-          margin-left: auto;
-        }
       }
     }
 

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

@@ -65,11 +65,11 @@
     height: base(1);
 
     svg {
-      width: base(2.75);
+      width: base(2);
-      height: base(2.75);
+      height: base(2);
       position: relative;
-      left: base(-0.825);
+      inset-inline-start: base(-0.5);
-      top: base(-0.825);
+      top: base(-0.5);
 
       .stroke {
         stroke-width: 2px;

packages/ui/src/elements/Localizer/LocalizerLabel/index.scss

@@ -5,12 +5,18 @@
   align-items: center;
   white-space: nowrap;
   display: flex;
+  padding-inline-start: base(0.4);
+  padding-inline-end: base(0.1);
+  gap: 0;
+  background-color: var(--theme-elevation-100);
+  border-radius: var(--style-radius-s);
 
   &__label {
     color: var(--theme-elevation-500);
   }
 
   &__chevron {
+    padding: base(0.1);
     .stroke {
       stroke: currentColor;
     }

packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx

@@ -22,12 +22,10 @@ export const LocalizerLabel: React.FC<{
       aria-label={ariaLabel || t('general:locale')}
       className={[baseClass, className].filter(Boolean).join(' ')}
     >
-      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}</div>
+      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>
-      &nbsp;&nbsp;
       <span className={`${baseClass}__current-label`}>
         {`${getTranslation(locale.label, i18n)}`}
       </span>
-      &nbsp;
       <ChevronIcon className={`${baseClass}__chevron`} />
     </div>
   )

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

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     z-index: 1;

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

@@ -23,6 +23,7 @@
     justify-content: center;
     align-items: center;
     height: 100%;
+    padding: base(2);
 
     &__toggle {
       @extend %btn-reset;

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

@@ -13,6 +13,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--base);
+    padding: base(2);
   }
 
   &__content {

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

@@ -75,6 +75,6 @@
   }
 
   @include small-break {
-    gap: calc(var(--base) / 4);
+    gap: base(0.4);
   }
 }

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

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   height: 100%;
+  padding: base(2);
 
   &__template {
     z-index: 1;

packages/ui/src/fields/Blocks/SectionTitle/index.scss

@@ -2,15 +2,20 @@
 
 .section-title {
   position: relative;
-  min-width: 0;
+  width: 100%;
+  max-width: 100%;
   pointer-events: all;
+  display: flex;
+  overflow: hidden;
 
   &:after {
     display: block;
     content: attr(data-value) ' ';
     visibility: hidden;
     white-space: nowrap;
-    min-width: base(2.5);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   &:after,
@@ -19,13 +24,18 @@
     font-weight: 600;
     font-size: base(0.625);
     padding: 0;
+    width: 100%;
   }
 
   &__input {
     color: var(--theme-elevation-800);
     background-color: transparent;
     border: none;
+    min-width: min-content;
     width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
     resize: none;
     appearance: none;

packages/ui/src/fields/Blocks/index.scss

@@ -61,6 +61,7 @@
   &__block-header {
     display: inline-flex;
     max-width: 100%;
+    width: 100%;
     overflow: hidden;
     gap: base(0.375);
   }

packages/ui/src/scss/app.scss

@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
-  --doc-controls-height: calc(var(--base) * 3);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
+    --app-header-height: calc(var(--base) * 2.8);
     --doc-controls-height: calc(var(--base) * 2.5);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }

packages/ui/src/scss/type.scss

@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {

packages/ui/src/scss/vars.scss

@@ -18,7 +18,7 @@ $baseline-body-size: 13px !default;
 $baseline: math.div($baseline-px, $baseline-body-size) + rem;
 
 @function base($multiplier) {
-  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
+  @return ($baseline-px * $multiplier);
 }
 
 //////////////////////////////