Optimize GridToolbarQuickFilter (the search input above the DataGrid)

.changeset/angry-poems-lay.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Make the width of `GridToolbarQuickFilter` responsive when used inside `DataGridToolbar`

.changeset/witty-garlics-flow.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin-theme": minor
+---
+
+Prevent the input value of `GridToolbarQuickFilter` from being truncated too early

packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx

@@ -46,6 +46,17 @@ export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, {
     styleOverrides: mergeOverrideStyles<"MuiDataGrid">(component?.styleOverrides, {
         root: {
             backgroundColor: "white",
+
+            "& [class*='MuiDataGrid-toolbarQuickFilter']": {
+                [`& > .${inputBaseClasses.root} .${inputBaseClasses.input}`]: {
+                    paddingRight: 0, // Removes unnecessary spacing to the clear button that already has enough spacing
+                    textOverflow: "ellipsis",
+                },
+
+                [`& > .${inputBaseClasses.root} .${inputBaseClasses.input}[value=''] + .${iconButtonClasses.root}`]: {
+                    display: "none", // Prevents the disabled clear-button from overlaying the input value
+                },
+            },
         },
         columnsPanelRow: {
             marginBottom: spacing(2),

packages/admin/admin/src/common/toolbar/DataGridToolbar.tsx

@@ -24,6 +24,18 @@ const Root = createComponentSlot(Toolbar)<DataGridToolbarClassKey, OwnerState>({
     },
 })(
     ({ ownerState, theme }) => css`
+        [class*="MuiDataGrid-toolbarQuickFilter"] {
+            width: 120px;
+
+            ${theme.breakpoints.up("sm")} {
+                width: 150px;
+            }
+
+            ${theme.breakpoints.up("md")} {
+                width: "auto";
+            }
+        }
+
         ${ownerState.density === "comfortable" &&
         css`
             min-height: 80px;