Override padding-right of MuiTablePagination to fix DataGrid pagi…

…nation select styling (#2396)

Override `padding-right` of `MuiTablePagination`

This fixes the styling of the pagination select in `DataGrid`s.
Previously, the text and icon stuck together.

---------

Co-authored-by: Ricky James Smith <[email protected]>

.changeset/long-dolls-shake.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin-theme": patch
+---
+
+Fix spacing between page number and chevron icon in the pagination select of `DataGrid`

packages/admin/admin-theme/src/componentsTheme/MuiTablePagination.ts

@@ -0,0 +1,15 @@
+import { inputBaseClasses, tablePaginationClasses } from "@mui/material";
+
+import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
+import { GetMuiComponentTheme } from "./getComponentsTheme";
+
+export const getMuiTablePagination: GetMuiComponentTheme<"MuiTablePagination"> = (component, { palette }) => ({
+    ...component,
+    styleOverrides: mergeOverrideStyles<"MuiTablePagination">(component?.styleOverrides, {
+        select: {
+            [`&.${inputBaseClasses.input}.${tablePaginationClasses.select}`]: {
+                paddingRight: 32,
+            },
+        },
+    }),
+});

packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts

@@ -42,6 +42,7 @@ import { getMuiSvgIcon } from "./MuiSvgIcon";
 import { getMuiSwitch } from "./MuiSwitch";
 import { getMuiTab } from "./MuiTab";
 import { getMuiTableCell } from "./MuiTableCell";
+import { getMuiTablePagination } from "./MuiTablePagination";
 import { getMuiTableRow } from "./MuiTableRow";
 import { getMuiTabs } from "./MuiTabs";
 import { getMuiToggleButton } from "./MuiToggleButton";
@@ -108,4 +109,5 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
     MuiToggleButtonGroup: getMuiToggleButtonGroup(components.MuiToggleButtonGroup, themeData),
     MuiTooltip: getMuiTooltip(components.MuiTooltip, themeData),
     MuiTypography: getMuiTypography(components.MuiTypography, themeData),
+    MuiTablePagination: getMuiTablePagination(components.MuiTablePagination, themeData),
 });