[DataGrid] Header filter design improvements

docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx

@@ -32,28 +32,17 @@ function RatingInputValue(
   };
 
   return (
-    <React.Fragment>
+    <Box sx={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+      <Rating
+        name="custom-rating-filter-operator"
+        value={Number(item.value)}
+        onChange={handleFilterChange}
+        precision={0.5}
+        ref={ratingRef}
+      />
       {headerFilterMenu}
-      <Box
-        sx={{
-          display: 'inline-flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          height: '100%',
-          pl: '10px',
-          bl: '1px solid lightgrey',
-        }}
-      >
-        <Rating
-          name="custom-rating-filter-operator"
-          value={Number(item.value)}
-          onChange={handleFilterChange}
-          precision={0.5}
-          ref={ratingRef}
-        />
-      </Box>
       {clearButton}
-    </React.Fragment>
+    </Box>
   );
 }
 

docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx

@@ -43,7 +43,12 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
   const label = !value ? 'Filter' : 'Is admin';
 
   return (
-    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
+    <FormControl
+      variant="outlined"
+      size="small"
+      sx={{ '.MuiOutlinedInput-input': { fontSize: 14 } }}
+      fullWidth
+    >
       <InputLabel id="select-is-admin-label">{label}</InputLabel>
       <Select
         labelId="select-is-admin-label"