even tighter bulk filter modal spacing (#24521)

frontend/src/metabase/components/TokenField/TokenField.styled.tsx

@@ -2,10 +2,7 @@ import styled from "@emotion/styled";
 
 import { color } from "metabase/lib/colors";
 
-import {
-  space,
-  breakpointMinHeightMedium,
-} from "metabase/styled-components/theme";
+import { space } from "metabase/styled-components/theme";
 
 export const TokenFieldContainer = styled.ul`
   display: flex;
@@ -29,11 +26,7 @@ export const TokenInputItem = styled.li`
   flex: 1 0 auto;
   align-items: center;
   margin-right: 0.5rem;
-  padding: 0.5rem;
-  height: 30px;
-  ${breakpointMinHeightMedium} {
-    height: 46px;
-  }
+  height: 46px;
 `;
 
 export const PrefixContainer = styled.div`

frontend/src/metabase/components/TokenFieldItem/TokenFieldItem.styled.ts

 import styled from "@emotion/styled";
 import { color, alpha, darken } from "metabase/lib/colors";
-import { breakpointMinHeightMedium } from "metabase/styled-components/theme";
 
 export const TokenFieldItem = styled.li<{
   isValid: boolean;
 }>`
   display: flex;
   align-items: center;
-  padding: 0.75rem 1rem;
-  height: 30px;
-  ${breakpointMinHeightMedium} {
-    height: 46px;
-  }
+  padding: 0.5rem 0.75rem;
+
+  height: 46px;
   border-radius: 0.5rem;
   color: ${({ isValid }) => (isValid ? color("brand") : color("error"))};
   background-color: ${alpha("brand", 0.2)};

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

@@ -7,7 +7,7 @@ export const ListRoot = styled.div`
 `;
 
 export const ListRow = styled.div`
-  padding: 1.5rem 2rem;
+  padding: 1rem 2rem;
   border-bottom: 1px solid ${color("border")};
   &:last-of-type {
     border-bottom: none;

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

 import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
-import {
-  space,
-  breakpointMaxSmall,
-  breakpointMinHeightMedium,
-} from "metabase/styled-components/theme";
+import { space, breakpointMaxSmall } from "metabase/styled-components/theme";
 
 import TabList from "metabase/core/components/TabList";
 import TabPanel from "metabase/core/components/TabPanel";
@@ -67,10 +63,6 @@ export const ModalTabList = styled(TabList)`
     width: 100%;
     height: 5rem;
   }
-
-  ${breakpointMinHeightMedium} {
-    font-size: 1rem;
-  }
 `;
 
 export const ModalTabPanel = styled(TabPanel)`

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

 import styled from "@emotion/styled";
 import { color, alpha } from "metabase/lib/colors";
-import { breakpointMinHeightMedium } from "metabase/styled-components/theme";
 
 import SelectButton from "metabase/core/components/SelectButton";
 import FilterPopover from "../../FilterPopover";
@@ -12,20 +11,17 @@ type SelectFilterButtonProps = {
 };
 
 const lightSelectButton = ({ hasValue, isActive }: SelectFilterButtonProps) => `
-    height: 40px;
-    ${breakpointMinHeightMedium} {
-      height: 56px;
-    }
     padding: 0.5rem 1rem;
+    height: 40px;
 
     background-color: ${hasValue ? alpha("brand", 0.2) : color("white")};
-    color: ${hasValue ? color("brand") : color("text-light")};
+    color: ${hasValue ? color("brand") : color("text-medium")};
     border-color: ${
       isActive ? color("brand") : hasValue ? "transparent" : color("border")
     };
 
     .Icon {
-      color: ${hasValue ? color("brand") : color("text-light")};
+      color: ${hasValue ? color("brand") : color("text-medium")};
     }
 `;
 

frontend/src/metabase/query_builder/components/filters/modals/InlineDatePicker/InlineDatePicker.styled.ts

@@ -20,7 +20,7 @@ export const OptionButton = styled(Button)<OptionButtonProps>`
   border: none;
 
   border-radius: ${space(1)};
-  padding: 13px ${space(2)};
+  padding: 10px ${space(2)};
   border: 1px solid
     ${({ active }) => (active ? "transparent" : color("border"))};
 

frontend/src/metabase/query_builder/components/filters/modals/InlineOperatorSelector/InlineOperatorSelector.styled.ts

 import styled from "@emotion/styled";
-import {
-  space,
-  breakpointMinHeightMedium,
-  breakpointMaxSmall,
-} from "metabase/styled-components/theme";
+import { space, breakpointMaxSmall } from "metabase/styled-components/theme";
 
 import { color, lighten } from "metabase/lib/colors";
 
@@ -12,9 +8,6 @@ import Icon from "metabase/components/Icon";
 export const InlineOperatorContainer = styled.div`
   font-weight: bold;
   font-size: 0.875rem;
-  ${breakpointMinHeightMedium} {
-    font-size: 1rem;
-  }
   ${breakpointMaxSmall} {
     margin-bottom: 0.875rem;
   }
@@ -30,12 +23,9 @@ export const FieldNameContainer = styled.div`
 
 export const FieldIcon = styled(Icon)`
   margin-right: ${space(1)};
+  color: ${color("text-medium")};
   width: 1rem;
   height: 1rem;
-  ${breakpointMinHeightMedium} {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
 `;
 
 export const FieldTitle = styled.span`

frontend/src/metabase/query_builder/components/filters/modals/InlineValuePicker/InlineValuePicker.styled.ts

@@ -18,6 +18,9 @@ export const ValuesPickerContainer = styled.div<ValuesPickerContainerProps>`
     :focus-within {
       border-color: ${color("brand")};
     }
+    li {
+      height: 30px;
+    }
   }
   input {
     color: ${color("brand")};
@@ -45,8 +48,5 @@ export const NumberInput = styled(NumericInput)`
   width: 8rem;
   input {
     height: 40px;
-    ${breakpointMinHeightMedium} {
-      height: 56px;
-    }
   }
 `;

frontend/src/metabase/query_builder/components/filters/pickers/BooleanPicker/BooleanPicker.styled.tsx

@@ -21,7 +21,6 @@ export const RadioContainer = styled.div`
 `;
 
 export const CheckboxContainer = styled.div`
-  min-height: 2.25rem;
   display: flex;
   align-items: center;
   gap: 1rem;