From a17d84e570c404e575de4f894cd9ef386a331484 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com>
Date: Thu, 29 May 2025 10:08:41 -0400
Subject: [PATCH] fix(ui): reduces pill sizing in autosave cells (#12606)

---
 .../src/views/Versions/cells/AutosaveCell/index.scss  |  9 +++++++++
 .../src/views/Versions/cells/AutosaveCell/index.tsx   | 11 +++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 packages/next/src/views/Versions/cells/AutosaveCell/index.scss

diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.scss b/packages/next/src/views/Versions/cells/AutosaveCell/index.scss
new file mode 100644
index 000000000..b4d1d7099
--- /dev/null
+++ b/packages/next/src/views/Versions/cells/AutosaveCell/index.scss
@@ -0,0 +1,9 @@
+@layer payload-default {
+  .autosave-cell {
+    &__items {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) * 0.5);
+    }
+  }
+}
diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
index b1aab25e4..3d012b706 100644
--- a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
+++ b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
@@ -1,6 +1,10 @@
 'use client'
 import { Pill, useConfig, useTranslation } from '@payloadcms/ui'
-import React, { Fragment } from 'react'
+import React from 'react'
+
+import './index.scss'
+
+const baseClass = 'autosave-cell'
 
 type AutosaveCellProps = {
   latestDraftVersion?: string
@@ -24,7 +28,6 @@ export const renderPill = (data, latestVersion, currentLabel, previousLabel, pil
       ) : (
         <Pill size="small">{previousLabel}</Pill>
       )}
-      &nbsp;&nbsp;
     </React.Fragment>
   )
 }
@@ -73,10 +76,10 @@ export const AutosaveCell: React.FC<AutosaveCellProps> = ({
   }
 
   return (
-    <Fragment>
+    <div className={`${baseClass}__items`}>
       {rowData?.autosave && <Pill>{t('version:autosave')}</Pill>}
       {status && renderPill(rowData, latestVersion, currentLabel, previousLabel, pillStyle)}
       {publishedLocalePill}
-    </Fragment>
+    </div>
   )
 }