From 21409e9e9068307199e2c984434f1eaabced784e Mon Sep 17 00:00:00 2001
From: Nar Saynorath <nar.saynorath@sentry.io>
Date: Fri, 23 Jan 2026 13:52:38 -0500
Subject: [PATCH 1/4] feat(tracemetrics): Share width equally across query bar
 components

---
 .../metrics/metricToolbar/aggregateDropdown.tsx |  7 ++++++-
 .../metrics/metricToolbar/groupBySelector.tsx   |  7 ++++++-
 .../explore/metrics/metricToolbar/index.tsx     | 17 ++++++++++++-----
 .../metrics/metricToolbar/metricSelector.tsx    |  8 ++++++++
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/static/app/views/explore/metrics/metricToolbar/aggregateDropdown.tsx b/static/app/views/explore/metrics/metricToolbar/aggregateDropdown.tsx
index 37967b7b8ec3db..4ba7a8513cb265 100644
--- a/static/app/views/explore/metrics/metricToolbar/aggregateDropdown.tsx
+++ b/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%'}}
     />
   );
 }
diff --git a/static/app/views/explore/metrics/metricToolbar/groupBySelector.tsx b/static/app/views/explore/metrics/metricToolbar/groupBySelector.tsx
index 12df2951f0e684..2ca3d3a6533f1e 100644
--- a/static/app/views/explore/metrics/metricToolbar/groupBySelector.tsx
+++ b/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%'}}
     />
   );
 }
diff --git a/static/app/views/explore/metrics/metricToolbar/index.tsx b/static/app/views/explore/metrics/metricToolbar/index.tsx
index bb3957ec501ad5..6f7682702dcd96 100644
--- a/static/app/views/explore/metrics/metricToolbar/index.tsx
+++ b/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,7 +35,7 @@ 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 1fr 1fr 1fr ${metricQueries.length > 1 ? '40px' : '0'}`}
       data-test-id="metric-toolbar"
     >
       <VisualizeLabel
@@ -42,10 +43,16 @@ export function MetricToolbar({traceMetric, queryIndex}: MetricToolbarProps) {
         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}>
+        <AggregateDropdown traceMetric={traceMetric} />
+        <GroupBySelector traceMetric={traceMetric} />
+      </Flex>
+      <Flex minWidth={0}>
+        <Filter traceMetric={traceMetric} />
+      </Flex>
       {metricQueries.length > 1 && <DeleteMetricButton />}
     </Grid>
   );
diff --git a/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx b/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx
index 18c6221115c611..4cd972be6ff887 100644
--- a/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx
+++ b/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'}}
+        />
+      )}
     />
   );
 }

From 66153afa9b4b4bf63d08ccc8a65fe3288a42a21f Mon Sep 17 00:00:00 2001
From: Nar Saynorath <nar.saynorath@sentry.io>
Date: Fri, 23 Jan 2026 14:34:34 -0500
Subject: [PATCH 2/4] fix aggregate and group by selectors

---
 static/app/views/explore/metrics/metricToolbar/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/app/views/explore/metrics/metricToolbar/index.tsx b/static/app/views/explore/metrics/metricToolbar/index.tsx
index 6f7682702dcd96..d2a7839abb5e98 100644
--- a/static/app/views/explore/metrics/metricToolbar/index.tsx
+++ b/static/app/views/explore/metrics/metricToolbar/index.tsx
@@ -47,8 +47,12 @@ export function MetricToolbar({traceMetric, queryIndex}: MetricToolbarProps) {
         <MetricSelector traceMetric={traceMetric} onChange={setTraceMetric} />
       </Flex>
       <Flex gap="md" minWidth={0}>
-        <AggregateDropdown traceMetric={traceMetric} />
-        <GroupBySelector traceMetric={traceMetric} />
+        <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} />

From b0278bfd3660fcfa38e48bd8365073d8fe68f71d Mon Sep 17 00:00:00 2001
From: Nar Saynorath <nar.saynorath@sentry.io>
Date: Mon, 26 Jan 2026 11:40:26 -0500
Subject: [PATCH 3/4] cap max width size of selectors and min width size of
 filter

---
 static/app/views/explore/metrics/metricToolbar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/explore/metrics/metricToolbar/index.tsx b/static/app/views/explore/metrics/metricToolbar/index.tsx
index d2a7839abb5e98..2e7bcb2cee2d73 100644
--- a/static/app/views/explore/metrics/metricToolbar/index.tsx
+++ b/static/app/views/explore/metrics/metricToolbar/index.tsx
@@ -35,7 +35,7 @@ export function MetricToolbar({traceMetric, queryIndex}: MetricToolbarProps) {
       width="100%"
       align="center"
       gap="md"
-      columns={`34px 1fr 1fr 1fr ${metricQueries.length > 1 ? '40px' : '0'}`}
+      columns={`34px minmax(auto, 300px) minmax(auto, 350px) minmax(200px, 1fr) ${metricQueries.length > 1 ? '40px' : '0'}`}
       data-test-id="metric-toolbar"
     >
       <VisualizeLabel

From f69e6233b4cb4cb306e9e631a80646e7cffbb0a3 Mon Sep 17 00:00:00 2001
From: Nar Saynorath <nar.saynorath@sentry.io>
Date: Mon, 26 Jan 2026 13:22:42 -0500
Subject: [PATCH 4/4] Use ratio for grid columns

---
 static/app/views/explore/metrics/metricToolbar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/explore/metrics/metricToolbar/index.tsx b/static/app/views/explore/metrics/metricToolbar/index.tsx
index 2e7bcb2cee2d73..7b71e5f850a13d 100644
--- a/static/app/views/explore/metrics/metricToolbar/index.tsx
+++ b/static/app/views/explore/metrics/metricToolbar/index.tsx
@@ -35,7 +35,7 @@ export function MetricToolbar({traceMetric, queryIndex}: MetricToolbarProps) {
       width="100%"
       align="center"
       gap="md"
-      columns={`34px minmax(auto, 300px) minmax(auto, 350px) minmax(200px, 1fr) ${metricQueries.length > 1 ? '40px' : '0'}`}
+      columns={`34px 2fr 3fr 6fr ${metricQueries.length > 1 ? '40px' : '0'}`}
       data-test-id="metric-toolbar"
     >
       <VisualizeLabel