fix(ui): chonk styling for compactSelect (#88093)

Author: TkDodo

static/app/components/core/compactSelect/control.tsx

@@ -561,7 +561,7 @@ export function Control({
                   onFocus={onSearchFocus}
                   onBlur={onSearchBlur}
                   onChange={e => updateSearch(e.target.value)}
-                  size={searchInputSizeMapping[size]}
+                  size="xs"
                   {...searchKeyboardProps}
                 />
               )}
@@ -655,12 +655,6 @@ const ClearButton = styled(Button)`
   margin: -${space(0.25)} -${space(0.5)};
 `;
 
-const searchInputSizeMapping: Record<FormSize, FormSize> = {
-  md: 'sm',
-  sm: 'xs',
-  xs: 'xs',
-};
-
 const SearchInput = styled(Input)`
   appearance: none;
   width: calc(100% - ${space(0.5)} * 2);

static/app/components/core/compactSelect/gridList/option.tsx

@@ -1,4 +1,5 @@
 import {Fragment, useMemo, useRef, useState} from 'react';
+import styled from '@emotion/styled';
 import type {AriaGridListItemOptions} from '@react-aria/gridlist';
 import {useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';
 import {useFocusWithin, useHover} from '@react-aria/interactions';
@@ -7,8 +8,9 @@ import type {ListState} from '@react-stately/list';
 import type {Node} from '@react-types/shared';
 
 import {Checkbox} from 'sentry/components/core/checkbox';
-import {MenuListItem} from 'sentry/components/core/menuListItem';
+import {InnerWrap, MenuListItem} from 'sentry/components/core/menuListItem';
 import {IconCheckmark} from 'sentry/icons';
+import {space} from 'sentry/styles/space';
 import type {FormSize} from 'sentry/utils/theme';
 
 import {CheckWrap} from '../styles';
@@ -111,7 +113,7 @@ export function GridListOption({node, listState, size}: GridListOptionProps) {
   }, [multiple, isSelected, isDisabled, size, leadingItems, hideCheck]);
 
   return (
-    <MenuListItem
+    <StyledMenuListItem
       {...rowPropsMemo}
       ref={ref}
       size={size}
@@ -132,3 +134,9 @@ export function GridListOption({node, listState, size}: GridListOptionProps) {
     />
   );
 }
+
+const StyledMenuListItem = styled(MenuListItem)`
+  > ${InnerWrap} {
+    padding-left: ${space(1)};
+  }
+`;

static/app/components/core/compactSelect/listBox/option.tsx

@@ -1,12 +1,14 @@
 import {Fragment, useMemo, useRef} from 'react';
+import styled from '@emotion/styled';
 import type {AriaOptionProps} from '@react-aria/listbox';
 import {useOption} from '@react-aria/listbox';
 import type {ListState} from '@react-stately/list';
 import type {Node} from '@react-types/shared';
 
 import {Checkbox} from 'sentry/components/core/checkbox';
-import {MenuListItem} from 'sentry/components/core/menuListItem';
+import {InnerWrap, MenuListItem} from 'sentry/components/core/menuListItem';
 import {IconCheckmark} from 'sentry/icons';
+import {space} from 'sentry/styles/space';
 import type {FormSize} from 'sentry/utils/theme';
 
 import {CheckWrap} from '../styles';
@@ -90,7 +92,7 @@ export function ListBoxOption({
   }, [multiple, isSelected, isDisabled, size, leadingItems, hideCheck]);
 
   return (
-    <MenuListItem
+    <StyledMenuListItem
       {...optionPropsMemo}
       ref={ref}
       size={size}
@@ -111,3 +113,9 @@ export function ListBoxOption({
     />
   );
 }
+
+const StyledMenuListItem = styled(MenuListItem)`
+  > ${InnerWrap} {
+    padding-left: ${space(1)};
+  }
+`;