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  - [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
2024-08-09 11:19:36 -04:00
parent 69ada97df5
commit 0d552fd523
39 changed files with 142 additions and 96 deletions
--- a/packages/next/src/elements/DocumentHeader/Tabs/index.scss
+++ b/packages/next/src/elements/DocumentHeader/Tabs/index.scss
@@ -37,7 +37,6 @@

    &__tabs {
      padding: 0;
-      margin-left: var(--gutter-h);
    }
  }

--- a/packages/next/src/elements/DocumentHeader/index.scss
+++ b/packages/next/src/elements/DocumentHeader/index.scss
@@ -40,8 +40,6 @@

    &__title {
      width: 100%;
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
    }
  }

--- a/packages/next/src/elements/LeaveWithoutSaving/index.scss
+++ b/packages/next/src/elements/LeaveWithoutSaving/index.scss
@@ -13,6 +13,7 @@
    display: flex;
    flex-direction: column;
    gap: var(--base);
+    padding: base(2);
  }

  &__content {
--- a/packages/next/src/elements/Nav/index.client.tsx
+++ b/packages/next/src/elements/Nav/index.client.tsx
@@ -98,11 +98,7 @@ export const DefaultNavClient: React.FC = () => {
                  key={i}
                  tabIndex={!navOpen ? -1 : undefined}
                >
-                  {activeCollection && (
-                    <span className={`${baseClass}__link-icon`}>
-                      <ChevronIcon direction="right" />
-                    </span>
-                  )}
+                  {activeCollection && <div className={`${baseClass}__link-indicator`} />}
                  <span className={`${baseClass}__link-label`}>{entityLabel}</span>
                </LinkElement>
              )
--- a/packages/next/src/elements/Nav/index.scss
+++ b/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 {
-    margin-right: calc(var(--base) * 0.25);
-    top: -1px;
-    position: relative;
+  &__link-indicator {
+    position: absolute;
+    display: block;
+    // 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 {
--- a/packages/next/src/scss/app.scss
+++ b/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) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --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);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --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;
  }
--- a/packages/next/src/scss/type.scss
+++ b/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 {
--- a/packages/next/src/views/API/index.scss
+++ b/packages/next/src/views/API/index.scss
@@ -111,8 +111,7 @@
      position: relative;
      width: 100%;
      top: 0;
-      padding-right: var(--gutter-h);
-      padding-left: var(--gutter-h);
+      padding-inline-end: var(--gutter-h);
    }
  }
 }
--- a/packages/next/src/views/List/Default/index.scss
+++ b/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(3);
-
-    &__header {
-      .pill {
-        top: -6px;
-      }
-    }
+    margin-bottom: base(2.4);
  }
 }
--- a/packages/richtext-lexical/src/features/blocks/component/index.scss
+++ b/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(
-    --font-body
-  ); // Reset font to non-serif, body font, as the lexical editor parent uses a serif font.
+  @extend %body;
+
+  &__row {
+    .collapsible__toggle-wrap {
+      padding-inline-start: base(0.4);
+    }
+  }

  margin: 0 0 1.5em;

--- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss
+++ b/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;
  }
 }

--- a/packages/richtext-lexical/src/scss/app.scss
+++ b/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) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --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);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --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;
  }
--- a/packages/richtext-lexical/src/scss/type.scss
+++ b/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 {
--- a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
+++ b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.scss
@@ -35,11 +35,11 @@
    height: base(1);

    svg {
-      width: base(2.75);
-      height: base(2.75);
+      width: base(2);
+      height: base(2);
      position: relative;
-      left: base(-0.825);
-      top: base(-0.825);
+      inset-inline-start: base(-0.5);
+      top: base(-0.5);

      .stroke {
        stroke-width: 2px;
--- a/packages/richtext-slate/src/scss/app.scss
+++ b/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) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --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);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --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;
  }
--- a/packages/richtext-slate/src/scss/type.scss
+++ b/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 {
--- a/packages/ui/src/elements/AppHeader/index.scss
+++ b/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);
    }

--- a/packages/ui/src/elements/Card/index.scss
+++ b/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 {
--- a/packages/ui/src/elements/Collapsible/index.scss
+++ b/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 {
--- a/packages/ui/src/elements/DeleteDocument/index.scss
+++ b/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;
--- a/packages/ui/src/elements/DeleteMany/index.scss
+++ b/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;
--- a/packages/ui/src/elements/DocumentControls/index.scss
+++ b/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);
+    }
+  }
 }
--- a/packages/ui/src/elements/DuplicateDocument/index.scss
+++ b/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;
--- a/packages/ui/src/elements/EditMany/index.scss
+++ b/packages/ui/src/elements/EditMany/index.scss
@@ -63,17 +63,11 @@
      height: base(1);

      svg {
-        width: base(2.75);
-        height: base(2.75);
+        width: base(2);
+        height: base(2);
        position: relative;
-        [dir='ltr'] & {
-          left: base(-0.825);
-        }
-
-        [dir='rtl'] & {
-          right: base(-0.825);
-        }
-        top: base(-0.825);
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);

        .stroke {
          stroke-width: 2px;
--- a/packages/ui/src/elements/GenerateConfirmation/index.scss
+++ b/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;
--- a/packages/ui/src/elements/ListControls/index.scss
+++ b/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);
-
-        svg {
-          margin-left: auto;
-        }
+        padding: base(0.2) base(0.2) base(0.2) base(0.4);
+        justify-content: space-between;
      }
    }

--- a/packages/ui/src/elements/ListDrawer/index.scss
+++ b/packages/ui/src/elements/ListDrawer/index.scss
@@ -65,11 +65,11 @@
    height: base(1);

    svg {
-      width: base(2.75);
-      height: base(2.75);
+      width: base(2);
+      height: base(2);
      position: relative;
-      left: base(-0.825);
-      top: base(-0.825);
+      inset-inline-start: base(-0.5);
+      top: base(-0.5);

      .stroke {
        stroke-width: 2px;
--- a/packages/ui/src/elements/Localizer/LocalizerLabel/index.scss
+++ b/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;
    }
--- a/packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx
+++ b/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>
-      &nbsp;&nbsp;
+      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>
      <span className={`${baseClass}__current-label`}>
        {`${getTranslation(locale.label, i18n)}`}
      </span>
-      &nbsp;
      <ChevronIcon className={`${baseClass}__chevron`} />
    </div>
  )
--- a/packages/ui/src/elements/PublishMany/index.scss
+++ b/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;
--- a/packages/ui/src/elements/Status/index.scss
+++ b/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;
--- a/packages/ui/src/elements/StayLoggedIn/index.scss
+++ b/packages/ui/src/elements/StayLoggedIn/index.scss
@@ -13,6 +13,7 @@
    display: flex;
    flex-direction: column;
    gap: var(--base);
+    padding: base(2);
  }

  &__content {
--- a/packages/ui/src/elements/StepNav/index.scss
+++ b/packages/ui/src/elements/StepNav/index.scss
@@ -75,6 +75,6 @@
  }

  @include small-break {
-    gap: calc(var(--base) / 4);
+    gap: base(0.4);
  }
 }
--- a/packages/ui/src/elements/UnpublishMany/index.scss
+++ b/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;
--- a/packages/ui/src/fields/Blocks/SectionTitle/index.scss
+++ b/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;
--- a/packages/ui/src/fields/Blocks/index.scss
+++ b/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);
  }
--- a/packages/ui/src/scss/app.scss
+++ b/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) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --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;
  }
--- a/packages/ui/src/scss/type.scss
+++ b/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 {
--- a/packages/ui/src/scss/vars.scss
+++ b/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);
 }

 //////////////////////////////