category format updates (#23745)

frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.styled.tsx

@@ -10,18 +10,11 @@ export const Loading = styled(LoadingSpinner)`
 `;
 
 export const PickerContainer = styled.div`
-  grid-column: span 2;
-  margin: ${space(2)} 0;
-  padding-bottom: ${space(2)};
   font-weight: bold;
-  border-bottom: 1px solid ${color("border")};
 `;
 
 export const PickerGrid = styled.div`
-  width: 100%;
   display: grid;
-  columns: 2;
   align-items: center;
-  grid-template-columns: repeat(3, 1fr);
   gap: ${space(2)};
 `;

frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.tsx

@@ -17,6 +17,7 @@ import {
   PickerGrid,
   Loading,
 } from "./InlineCategoryPicker.styled";
+
 import { BulkFilterSelect } from "../BulkFilterSelect";
 
 const mapStateToProps = (state: any, props: any) => {
@@ -104,7 +105,7 @@ export function InlineCategoryPickerComponent({
       <SimpleCategoryFilterPicker
         filter={filter ?? newFilter}
         onChange={onChange}
-        options={fieldValues.flat()}
+        options={fieldValues.flat().filter(isValidOption)}
       />
     );
   }
@@ -131,7 +132,7 @@ export function SimpleCategoryFilterPicker({
   options,
   onChange,
 }: SimpleCategoryFilterPickerProps) {
-  const filterValues = filter.arguments().filter(Boolean);
+  const filterValues = filter.arguments().filter(isValidOption);
 
   const handleChange = (option: string | number, checked: boolean) => {
     const newArgs = checked
@@ -157,6 +158,8 @@ export function SimpleCategoryFilterPicker({
   );
 }
 
+const isValidOption = (option: any) => option !== undefined && option !== null;
+
 export const InlineCategoryPicker = connect(
   mapStateToProps,
   mapDispatchToProps,