From 10bd20904a1dc93f9cbf229912aef958269953af Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Wed, 4 Oct 2023 16:47:13 -0400
Subject: [PATCH] chore: removes pseudo element from mobile doc tabs

---
 .../elements/DocumentHeader/Tabs/index.scss   | 16 +++++-------
 .../elements/DocumentHeader/Tabs/index.tsx    | 26 ++++++++++---------
 2 files changed, 20 insertions(+), 22 deletions(-)

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 db587817c..d5f73ec24 100644
--- a/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.scss
+++ b/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.scss
@@ -1,6 +1,8 @@
 @import '../../../../scss/styles.scss';
 
 .doc-tabs {
+  display: flex;
+
   &__tabs {
     display: flex;
     gap: calc(var(--base) / 2);
@@ -18,20 +20,14 @@
     &__tabs {
       padding: 0;
       margin-left: var(--gutter-h);
-
-      & > *:last-child {
-        // CSS hack, give the illusion of right margin within the overflowing container
-        // margin-right, padding-right, etc are tricky within overflowing flex-boxes
-        &::after {
-          content: '';
-          padding-right: var(--gutter-h);
-          height: 1px;
-        }
-      }
     }
   }
 
   @include small-break {
+    &__tabs-container {
+      margin-right: var(--gutter-h);
+    }
+
     &__tabs {
       gap: var(--gutter-h);
     }
diff --git a/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.tsx b/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.tsx
index 80f03124d..cbc42ef87 100644
--- a/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.tsx
+++ b/packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.tsx
@@ -17,20 +17,22 @@ export const DocumentTabs: React.FC<DocumentTabProps> = (props) => {
   if ((collection && isEditing) || global) {
     return (
       <div className={baseClass}>
-        <ul className={`${baseClass}__tabs`}>
-          {tabs?.map((Tab, index) => {
-            return <DocumentTab {...props} {...Tab} key={`tab-${index}`} />
-          })}
-          {customViews?.map((CustomView, index) => {
-            const { Tab, path } = CustomView
+        <div className={`${baseClass}__tabs-container`}>
+          <ul className={`${baseClass}__tabs`}>
+            {tabs?.map((Tab, index) => {
+              return <DocumentTab {...props} {...Tab} key={`tab-${index}`} />
+            })}
+            {customViews?.map((CustomView, index) => {
+              const { Tab, path } = CustomView
 
-            if (typeof Tab === 'function') {
-              return <Tab path={path} {...props} key={`tab-custom-${index}`} />
-            }
+              if (typeof Tab === 'function') {
+                return <Tab path={path} {...props} key={`tab-custom-${index}`} />
+              }
 
-            return <DocumentTab {...props} {...Tab} key={`tab-custom-${index}`} />
-          })}
-        </ul>
+              return <DocumentTab {...props} {...Tab} key={`tab-custom-${index}`} />
+            })}
+          </ul>
+        </div>
       </div>
     )
   }