Optimize GridToolbarQuickFilter (the search input above the `DataGr…

…id`) (#3213) Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
vivid-planet · Jan 21, 2025 · af51bb4 · af51bb4
1 parent 4240d9b
commit af51bb4
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 0 deletions.
diff --git a/.changeset/angry-poems-lay.md b/.changeset/angry-poems-lay.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Make the width of `GridToolbarQuickFilter` responsive when used inside `DataGridToolbar`
diff --git a/.changeset/witty-garlics-flow.md b/.changeset/witty-garlics-flow.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin-theme": patch
+---
+
+Prevent the input value of `GridToolbarQuickFilter` from being truncated too early
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx b/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),

diff --git a/packages/admin/admin/src/common/toolbar/DataGridToolbar.tsx b/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;