From 9364d51f4bff3dbd03f001febfddc301268d7c2c Mon Sep 17 00:00:00 2001
From: Jessica Rynkar <67977755+jessrynkar@users.noreply.github.com>
Date: Thu, 12 Jun 2025 15:43:00 +0100
Subject: [PATCH] fix(ui): inconsistent pill sizes across admin panel (#12788)

### What?
Fixes inconsistent `pill` sizes across the Admin Panel.

### How?
Pills without a specified size default to **medium**. In the folders
[PR](https://github.com/payloadcms/payload/pull/10030), additional
padding was to the medium size. As a result, any pills without an
explicit size now appear larger than intended.

This PR fixes that by updating any pills that should be small to
explicitly set `size="small"`.

Fixes #12752
---
 packages/next/src/views/Version/SelectComparison/index.tsx  | 2 +-
 .../next/src/views/Versions/cells/AutosaveCell/index.tsx    | 4 ++--
 .../Search/ui/ReindexButton/ReindexButtonLabel/index.tsx    | 2 +-
 packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx   | 1 +
 .../DrawerTitleActions/ListDrawerCreateNewDocButton.tsx     | 2 +-
 .../PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx   | 2 +-
 .../src/elements/QueryPresets/cells/ColumnsCell/index.tsx   | 2 +-
 .../src/elements/QueryPresets/fields/ColumnsField/index.tsx | 6 +++++-
 .../src/elements/QueryPresets/fields/WhereField/index.tsx   | 2 +-
 packages/ui/src/elements/RelationshipTable/index.tsx        | 1 +
 packages/ui/src/elements/SelectMany/index.tsx               | 1 +
 packages/ui/src/utilities/renderTable.tsx                   | 2 +-
 12 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/next/src/views/Version/SelectComparison/index.tsx b/packages/next/src/views/Version/SelectComparison/index.tsx
index 37c50742e..daa21a256 100644
--- a/packages/next/src/views/Version/SelectComparison/index.tsx
+++ b/packages/next/src/views/Version/SelectComparison/index.tsx
@@ -143,7 +143,7 @@ export const SelectComparison: React.FC<Props> = (props) => {
               const formattedLabel = locale?.label?.[i18n?.language] || locale?.label
 
               if (formattedLabel) {
-                publishedLocalePill = <Pill>{formattedLabel}</Pill>
+                publishedLocalePill = <Pill size="small">{formattedLabel}</Pill>
               }
             }
 
diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
index 3d012b706..ccc3bef26 100644
--- a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
+++ b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
@@ -71,13 +71,13 @@ export const AutosaveCell: React.FC<AutosaveCellProps> = ({
     const formattedLabel = locale?.label?.[i18n?.language] || locale?.label
 
     if (formattedLabel) {
-      publishedLocalePill = <Pill>{formattedLabel}</Pill>
+      publishedLocalePill = <Pill size="small">{formattedLabel}</Pill>
     }
   }
 
   return (
     <div className={`${baseClass}__items`}>
-      {rowData?.autosave && <Pill>{t('version:autosave')}</Pill>}
+      {rowData?.autosave && <Pill size="small">{t('version:autosave')}</Pill>}
       {status && renderPill(rowData, latestVersion, currentLabel, previousLabel, pillStyle)}
       {publishedLocalePill}
     </div>
diff --git a/packages/plugin-search/src/Search/ui/ReindexButton/ReindexButtonLabel/index.tsx b/packages/plugin-search/src/Search/ui/ReindexButton/ReindexButtonLabel/index.tsx
index 1d2b03a30..787bcbd1f 100644
--- a/packages/plugin-search/src/Search/ui/ReindexButton/ReindexButtonLabel/index.tsx
+++ b/packages/plugin-search/src/Search/ui/ReindexButton/ReindexButtonLabel/index.tsx
@@ -5,7 +5,7 @@ export const ReindexButtonLabel = () => {
     i18n: { t },
   } = useTranslation()
   return (
-    <Pill className="pill--has-action" icon={<ChevronIcon />} pillStyle="light">
+    <Pill className="pill--has-action" icon={<ChevronIcon />} pillStyle="light" size="small">
       {t('general:reindex')}
     </Pill>
   )
diff --git a/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx b/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
index b80ccfee2..bcd6f7d0f 100644
--- a/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
+++ b/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
@@ -92,6 +92,7 @@ export function FileSidebar() {
               <Pill
                 className={`${baseClass}__header__addFile`}
                 onClick={() => openModal(addMoreFilesDrawerSlug)}
+                size="small"
               >
                 {t('upload:addFile')}
               </Pill>
diff --git a/packages/ui/src/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.tsx b/packages/ui/src/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.tsx
index d3baafb37..6e1dde8eb 100644
--- a/packages/ui/src/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.tsx
+++ b/packages/ui/src/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.tsx
@@ -25,7 +25,7 @@ export function ListDrawerCreateNewDocButton({
       className={`${baseClass}__create-new-button`}
       key="create-new-button-toggler"
     >
-      <Pill>{t('general:createNew')}</Pill>
+      <Pill size="small">{t('general:createNew')}</Pill>
     </DocumentDrawerToggler>
   )
 }
diff --git a/packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx b/packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx
index e65b49e5f..cc72e32b3 100644
--- a/packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx
+++ b/packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx
@@ -41,7 +41,7 @@ export const buildUpcomingColumns = ({
         const type = doc.input?.type
 
         return (
-          <Pill key={doc.id} pillStyle={type === 'publish' ? 'success' : 'warning'}>
+          <Pill key={doc.id} pillStyle={type === 'publish' ? 'success' : 'warning'} size="small">
             {type === 'publish' && t('version:publish')}
             {type === 'unpublish' && t('version:unpublish')}
           </Pill>
diff --git a/packages/ui/src/elements/QueryPresets/cells/ColumnsCell/index.tsx b/packages/ui/src/elements/QueryPresets/cells/ColumnsCell/index.tsx
index efd14ca6a..7879c9e1d 100644
--- a/packages/ui/src/elements/QueryPresets/cells/ColumnsCell/index.tsx
+++ b/packages/ui/src/elements/QueryPresets/cells/ColumnsCell/index.tsx
@@ -21,7 +21,7 @@ export const QueryPresetsColumnsCell: React.FC<DefaultCellComponentProps> = ({ c
             }
 
             return (
-              <Pill key={i} pillStyle={isColumnActive ? 'always-white' : 'light'}>
+              <Pill key={i} pillStyle={isColumnActive ? 'always-white' : 'light'} size="small">
                 {toWords(column)}
               </Pill>
             )
diff --git a/packages/ui/src/elements/QueryPresets/fields/ColumnsField/index.tsx b/packages/ui/src/elements/QueryPresets/fields/ColumnsField/index.tsx
index 6c21780e5..24899aaa9 100644
--- a/packages/ui/src/elements/QueryPresets/fields/ColumnsField/index.tsx
+++ b/packages/ui/src/elements/QueryPresets/fields/ColumnsField/index.tsx
@@ -23,7 +23,11 @@ export const QueryPresetsColumnField: JSONFieldClientComponent = ({
               const isColumnActive = !column.startsWith('-')
 
               return (
-                <Pill key={i} pillStyle={isColumnActive ? 'always-white' : 'light-gray'}>
+                <Pill
+                  key={i}
+                  pillStyle={isColumnActive ? 'always-white' : 'light-gray'}
+                  size="small"
+                >
                   {toWords(column)}
                 </Pill>
               )
diff --git a/packages/ui/src/elements/QueryPresets/fields/WhereField/index.tsx b/packages/ui/src/elements/QueryPresets/fields/WhereField/index.tsx
index 9220c0dcc..4f202710d 100644
--- a/packages/ui/src/elements/QueryPresets/fields/WhereField/index.tsx
+++ b/packages/ui/src/elements/QueryPresets/fields/WhereField/index.tsx
@@ -44,7 +44,7 @@ const transformWhereToNaturalLanguage = (
     }
 
     return (
-      <Pill pillStyle="always-white">
+      <Pill pillStyle="always-white" size="small">
         <b>{toWords(key)}</b> {operator} <b>{toWords(value)}</b>
       </Pill>
     )
diff --git a/packages/ui/src/elements/RelationshipTable/index.tsx b/packages/ui/src/elements/RelationshipTable/index.tsx
index 3e4353ed3..cdf9b7c18 100644
--- a/packages/ui/src/elements/RelationshipTable/index.tsx
+++ b/packages/ui/src/elements/RelationshipTable/index.tsx
@@ -300,6 +300,7 @@ export const RelationshipTable: React.FC<RelationshipTableComponentProps> = (pro
             icon={<ChevronIcon direction={openColumnSelector ? 'up' : 'down'} />}
             onClick={() => setOpenColumnSelector(!openColumnSelector)}
             pillStyle="light"
+            size="small"
           >
             {t('general:columns')}
           </Pill>
diff --git a/packages/ui/src/elements/SelectMany/index.tsx b/packages/ui/src/elements/SelectMany/index.tsx
index aef666d6e..4ac67b061 100644
--- a/packages/ui/src/elements/SelectMany/index.tsx
+++ b/packages/ui/src/elements/SelectMany/index.tsx
@@ -25,6 +25,7 @@ export const SelectMany: React.FC<{
         }
       }}
       pillStyle="white"
+      size="small"
     >
       {`Select ${count}`}
     </Pill>
diff --git a/packages/ui/src/utilities/renderTable.tsx b/packages/ui/src/utilities/renderTable.tsx
index f74fdf154..d7cec3a14 100644
--- a/packages/ui/src/utilities/renderTable.tsx
+++ b/packages/ui/src/utilities/renderTable.tsx
@@ -205,7 +205,7 @@ export const renderTable = ({
       },
       Heading: i18n.t('version:type'),
       renderedCells: docs.map((doc, i) => (
-        <Pill key={i}>
+        <Pill key={i} size="small">
           {getTranslation(
             collections
               ? payload.collections[doc.relationTo].config.labels.singular