feat(tracemetrics): Consistently distribute space for metric toolbar

static/app/views/explore/metrics/metricToolbar/aggregateDropdown.tsx

@@ -17,13 +17,18 @@ export function AggregateDropdown({traceMetric}: {traceMetric: TraceMetric}) {
   return (
     <CompactSelect
       trigger={triggerProps => (
-        <OverlayTrigger.Button {...triggerProps} prefix={t('Agg')} />
+        <OverlayTrigger.Button
+          {...triggerProps}
+          prefix={t('Agg')}
+          style={{width: '100%'}}
+        />
       )}
       options={OPTIONS_BY_TYPE[traceMetric.type] ?? []}
       value={visualize.parsedFunction?.name ?? ''}
       onChange={option => {
         setVisualize(updateVisualizeYAxis(visualize, option.value, traceMetric));
       }}
+      style={{width: '100%'}}
     />
   );
 }

static/app/views/explore/metrics/metricToolbar/groupBySelector.tsx

@@ -80,7 +80,11 @@ export function GroupBySelector({traceMetric}: GroupBySelectorProps) {
       multiple
       searchable
       trigger={triggerProps => (
-        <OverlayTrigger.Button {...triggerProps} prefix={t('Group by')} />
+        <OverlayTrigger.Button
+          {...triggerProps}
+          prefix={t('Group by')}
+          style={{width: '100%'}}
+        />
       )}
       options={enabledOptions}
       value={[...groupBys]}
@@ -89,6 +93,7 @@ export function GroupBySelector({traceMetric}: GroupBySelectorProps) {
       onChange={selectedOptions => {
         setGroupBys(selectedOptions.map(option => option.value));
       }}
+      style={{width: '100%'}}
     />
   );
 }

static/app/views/explore/metrics/metricToolbar/index.tsx

@@ -1,5 +1,6 @@
 import {useCallback} from 'react';
 
+import {Flex} from 'sentry/components/core/layout/flex';
 import {Grid} from 'sentry/components/core/layout/grid';
 import {type TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
 import {
@@ -34,18 +35,28 @@ export function MetricToolbar({traceMetric, queryIndex}: MetricToolbarProps) {
       width="100%"
       align="center"
       gap="md"
-      columns={`34px auto auto auto 1fr ${metricQueries.length > 1 ? '40px' : '0'}`}
+      columns={`34px 2fr 3fr 6fr ${metricQueries.length > 1 ? '40px' : '0'}`}
       data-test-id="metric-toolbar"
     >
       <VisualizeLabel
         index={queryIndex}
         visualize={visualize}
         onClick={toggleVisibility}
       />
-      <MetricSelector traceMetric={traceMetric} onChange={setTraceMetric} />
-      <AggregateDropdown traceMetric={traceMetric} />
-      <GroupBySelector traceMetric={traceMetric} />
-      <Filter traceMetric={traceMetric} />
+      <Flex minWidth={0}>
+        <MetricSelector traceMetric={traceMetric} onChange={setTraceMetric} />
+      </Flex>
+      <Flex gap="md" minWidth={0}>
+        <Flex flex="2 1 0" minWidth={0}>
+          <AggregateDropdown traceMetric={traceMetric} />
+        </Flex>
+        <Flex flex="3 1 0" minWidth={0}>
+          <GroupBySelector traceMetric={traceMetric} />
+        </Flex>
+      </Flex>
+      <Flex minWidth={0}>
+        <Filter traceMetric={traceMetric} />
+      </Flex>
       {metricQueries.length > 1 && <DeleteMetricButton />}
     </Grid>
   );

static/app/views/explore/metrics/metricToolbar/metricSelector.tsx

@@ -3,6 +3,7 @@ import debounce from 'lodash/debounce';
 
 import {Tag} from '@sentry/scraps/badge/tag';
 import {CompactSelect, type SelectOption} from '@sentry/scraps/compactSelect';
+import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
 import usePrevious from 'sentry/utils/usePrevious';
@@ -110,6 +111,13 @@ export function MetricSelector({
           });
         }
       }}
+      style={{width: '100%'}}
+      trigger={triggerProps => (
+        <OverlayTrigger.Button
+          {...triggerProps}
+          style={{width: '100%', fontWeight: 'bold'}}
+        />
+      )}
     />
   );
 }