fix(alert): Metric alert presets fix threshold & layout (#36347)

* fix(alert): Fix metric alert presets threshold

* fix layouts

static/app/components/list/index.tsx

@@ -53,6 +53,7 @@ const List = styled(
   padding: 0;
   list-style: none;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: ${space(0.5)};
   ${p =>
     typeof p.symbol === 'string' &&

static/app/views/alerts/rules/metric/presets.tsx

@@ -71,10 +71,10 @@ async function getHighestVolumeTransaction(
   return null;
 }
 
-function makeTeamCriticalAlert(project: Project) {
+function makeTeamCriticalAlert(project: Project, threshold: number = 200) {
   return {
     label: AlertRuleTriggerType.CRITICAL,
-    alertThreshold: 200,
+    alertThreshold: threshold,
     actions: project.teams.slice(0, 4).map(team => ({
       type: ActionType.EMAIL,
       targetType: TargetType.TEAM,
@@ -86,10 +86,10 @@ function makeTeamCriticalAlert(project: Project) {
     })),
   };
 }
-function makeTeamWarningAlert() {
+function makeTeamWarningAlert(threshold: number = 100) {
   return {
     label: AlertRuleTriggerType.WARNING,
-    alertThreshold: 100,
+    alertThreshold: threshold,
     actions: [],
   };
 }
@@ -138,7 +138,7 @@ export const PRESET_AGGREGATES: Preset[] = [
         comparisonDelta: 24 * 60 * 7,
         comparisonType: AlertRuleComparisonType.CHANGE,
         thresholdType: AlertRuleThresholdType.BELOW,
-        triggers: [makeTeamCriticalAlert(project), makeTeamWarningAlert()],
+        triggers: [makeTeamCriticalAlert(project, 500), makeTeamWarningAlert(300)],
         query: 'transaction:' + transaction,
       };
     },

static/app/views/alerts/rules/metric/ruleForm.tsx

@@ -951,8 +951,8 @@ const Side = styled(Layout.Side)`
 
   @media (min-width: ${p => p.theme.breakpoints.large}) {
     border-left: 1px solid ${p => p.theme.gray200};
+    max-width: 400px;
   }
-  max-width: 400px;
 `;
 
 const StyledListItem = styled(ListItem)`