fix(ui): reduces pill sizing in autosave cells (#12606)

Author: JarrodMFlesch

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

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