feat(selectControl): Add maxMenuWidth prop (#34392)

static/app/components/forms/selectControl.tsx

@@ -78,6 +78,11 @@ export type ControlProps<OptionType = GeneralSelectValue> = Omit<
    * components/compactSelect.tsx
    */
   isCompact?: boolean;
+  /**
+   * Maximum width of the menu component. Menu item labels that overflow the
+   * menu's boundaries will automatically be truncated.
+   */
+  maxMenuWidth?: number | string;
   /**
    * Used by MultiSelectControl.
    */
@@ -126,7 +131,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
   props: WrappedControlProps<OptionType>
 ) {
   const theme = useTheme();
-  const {isCompact, isSearchable} = props;
+  const {isCompact, isSearchable, maxMenuWidth} = props;
 
   // TODO(epurkhiser): The loading indicator should probably also be our loading
   // indicator.
@@ -196,6 +201,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
       boxShadow: theme.dropShadowHeavy,
       width: 'auto',
       minWidth: '100%',
+      maxWidth: maxMenuWidth ?? 'auto',
       ...(isCompact && {
         position: 'relative',
         margin: 0,
@@ -216,7 +222,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
     }),
 
     menuPortal: () => ({
-      maxWidth: '24rem',
+      maxWidth: maxMenuWidth ?? '24rem',
       zIndex: theme.zIndex.dropdown,
       width: '90%',
       position: 'fixed',

static/app/components/forms/selectOption.tsx

@@ -48,7 +48,7 @@ function SelectOption(props: Props) {
           <ContentWrap
             isFocused={isFocused}
             showDividers={showDividers}
-            addRightMargin={!defined(trailingItems)}
+            addRightMargin={defined(trailingItems)}
           >
             <LabelWrap>
               <Label as={typeof label === 'string' ? 'p' : 'div'}>{label}</Label>
@@ -135,6 +135,7 @@ const ContentWrap = styled('div')<{
   gap: ${space(1)};
   justify-content: space-between;
   padding: ${space(1)} 0;
+  min-width: 0;
 
   ${p =>
     p.addRightMargin &&