fix(metrics): Create alert menu item not fitting (#72397)

![Screenshot 2024-06-10 at 12 45
48](https://github.com/getsentry/sentry/assets/7033940/319dddb9-0958-4b7d-9775-951f6b69845e)


Closes https://github.com/getsentry/sentry/issues/72122

static/app/views/metrics/pageHeaderActions.tsx

@@ -8,7 +8,7 @@ import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {CreateMetricAlertFeature} from 'sentry/components/metrics/createMetricAlertFeature';
-import {QuerySymbol} from 'sentry/components/metrics/querySymbol';
+import {getQuerySymbol} from 'sentry/components/metrics/querySymbol';
 import {
   IconBookmark,
   IconDashboard,
@@ -19,7 +19,7 @@ import {
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {isCustomMeasurement} from 'sentry/utils/metrics';
-import {MRIToField} from 'sentry/utils/metrics/mri';
+import {formatMRI} from 'sentry/utils/metrics/mri';
 import {MetricExpressionType, type MetricsQueryWidget} from 'sentry/utils/metrics/types';
 import {middleEllipsis} from 'sentry/utils/string/middleEllipsis';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -117,17 +117,11 @@ export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Pro
           });
           return {
             leadingItems: showQuerySymbols
-              ? [
-                  <QuerySymbol
-                    key="icon"
-                    queryId={widget.id}
-                    isHidden={widget.isHidden}
-                  />,
-                ]
+              ? [<span key="symbol">{getQuerySymbol(widget.id)}:</span>]
               : [],
             key: `add-alert-${index}`,
             label: widget.mri
-              ? middleEllipsis(MRIToField(widget.mri, widget.op), 60, /\.|-|_/)
+              ? `${widget.op}(${middleEllipsis(formatMRI(widget.mri), 60, /\.|-|_/)})`
               : t('Select a metric to create an alert'),
             tooltip: isCustomMeasurement({mri: widget.mri})
               ? t('Custom measurements cannot be used to create alerts')