fix(alerts): Fix dataset selector width (#58499)

Fix width of dataset selector in safari by directly applying `width:
max-content` to the `SegmentedControl`.

- follow up to https://github.com/getsentry/sentry/pull/58457

static/app/components/segmentedControl.tsx

@@ -42,6 +42,7 @@ type Priority = 'default' | 'primary';
 export interface SegmentedControlProps<Value extends string>
   extends Omit<RadioGroupProps, 'value' | 'defaultValue' | 'onChange'>,
     CollectionBase<any> {
+  className?: string;
   defaultValue?: Value;
   disabled?: RadioGroupProps['isDisabled'];
   onChange?: (value: Value) => void;
@@ -59,6 +60,7 @@ export function SegmentedControl<Value extends string>({
   size = 'md',
   priority = 'default',
   disabled,
+  className,
   ...props
 }: SegmentedControlProps<Value>) {
   const ref = useRef<HTMLDivElement>(null);
@@ -81,7 +83,13 @@ export function SegmentedControl<Value extends string>({
   const collectionList = useMemo(() => [...collection], [collection]);
 
   return (
-    <GroupWrap {...radioGroupProps} size={size} priority={priority} ref={ref}>
+    <GroupWrap
+      {...radioGroupProps}
+      className={className}
+      size={size}
+      priority={priority}
+      ref={ref}
+    >
       <LayoutGroup id={radioGroupProps.id}>
         {collectionList.map(option => (
           <Segment

static/app/views/alerts/filterBar.tsx

@@ -65,30 +65,28 @@ function FilterBar({
           />
         )}
         {onChangeDataset && (
-          <SegmentedControlWrapper>
-            <SegmentedControl<DatasetOption>
-              aria-label={t('Alert type')}
-              value={selectedDataset}
-              onChange={onChangeDataset}
+          <StyledSegmentedControl
+            aria-label={t('Alert type')}
+            value={selectedDataset}
+            onChange={onChangeDataset}
+          >
+            <SegmentedControl.Item key={DatasetOption.ALL}>
+              {t('All')}
+            </SegmentedControl.Item>
+            <SegmentedControl.Item key={DatasetOption.ERRORS}>
+              {t('Errors')}
+            </SegmentedControl.Item>
+            <SegmentedControl.Item key={DatasetOption.SESSIONS}>
+              {t('Sessions')}
+            </SegmentedControl.Item>
+            <SegmentedControl.Item
+              textValue={t('Performance')}
+              key={DatasetOption.PERFORMANCE}
             >
-              <SegmentedControl.Item key={DatasetOption.ALL}>
-                {t('All')}
-              </SegmentedControl.Item>
-              <SegmentedControl.Item key={DatasetOption.ERRORS}>
-                {t('Errors')}
-              </SegmentedControl.Item>
-              <SegmentedControl.Item key={DatasetOption.SESSIONS}>
-                {t('Sessions')}
-              </SegmentedControl.Item>
-              <SegmentedControl.Item
-                textValue={t('Performance')}
-                key={DatasetOption.PERFORMANCE}
-              >
-                {t('Performance')}
-                {showMigrationWarning ? <StyledIconWarning /> : null}
-              </SegmentedControl.Item>
-            </SegmentedControl>
-          </SegmentedControlWrapper>
+              {t('Performance')}
+              {showMigrationWarning ? <StyledIconWarning /> : null}
+            </SegmentedControl.Item>
+          </StyledSegmentedControl>
         )}
       </FilterButtons>
       <SearchBar
@@ -125,9 +123,8 @@ const FilterButtons = styled(ButtonBar)`
   }
 `;
 
-const SegmentedControlWrapper = styled('div')`
+const StyledSegmentedControl = styled(SegmentedControl<DatasetOption>)`
   width: max-content;
-  min-width: 345px;
 `;
 
 const StyledIconWarning = styled(IconWarning)`