chore: removes pseudo element from mobile doc tabs

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

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`}>
+        <div className={`${baseClass}__tabs-container`}>
-          {tabs?.map((Tab, index) => {
+          <ul className={`${baseClass}__tabs`}>
-            return <DocumentTab {...props} {...Tab} key={`tab-${index}`} />
+            {tabs?.map((Tab, index) => {
-          })}
+              return <DocumentTab {...props} {...Tab} key={`tab-${index}`} />
-          {customViews?.map((CustomView, index) => {
+            })}
-            const { Tab, path } = CustomView
+            {customViews?.map((CustomView, index) => {
+              const { Tab, path } = CustomView
 
-            if (typeof Tab === 'function') {
+              if (typeof Tab === 'function') {
-              return <Tab path={path} {...props} key={`tab-custom-${index}`} />
+                return <Tab path={path} {...props} key={`tab-custom-${index}`} />
-            }
+              }
 
-            return <DocumentTab {...props} {...Tab} key={`tab-custom-${index}`} />
+              return <DocumentTab {...props} {...Tab} key={`tab-custom-${index}`} />
-          })}
+            })}
-        </ul>
+          </ul>
+        </div>
       </div>
     )
   }