Narrow the alert condition picker (#49570)

public/app/features/alerting/unified/components/rule-editor/ConditionField.tsx

@@ -1,9 +1,10 @@
+import { css } from '@emotion/css';
 import { last } from 'lodash';
 import React, { FC, useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { SelectableValue } from '@grafana/data';
-import { Alert, Card, Field, InputControl, RadioButtonList } from '@grafana/ui';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { Alert, Card, Field, InputControl, RadioButtonList, useStyles2 } from '@grafana/ui';
 import { ExpressionDatasourceUID } from 'app/features/expressions/ExpressionDatasource';
 
 import { RuleFormValues } from '../../types/rule-form';
@@ -53,8 +54,10 @@ export const ConditionField: FC = () => {
     }
   }, [condition, expressions, options, setValue]);
 
+  const styles = useStyles2(getStyles);
+
   return options.length ? (
-    <Card>
+    <Card className={styles.container}>
       <Card.Heading>Set alert condition</Card.Heading>
       <Card.Meta>Select one of your queries or expressions set above that contains your alert condition.</Card.Meta>
       <Card.Actions>
@@ -75,8 +78,14 @@ export const ConditionField: FC = () => {
       </Card.Actions>
     </Card>
   ) : (
-    <Alert title="No queries or expressions have been configured" severity="warning">
+    <Alert title="No queries or expressions have been configured" severity="warning" className={styles.container}>
       Create at least one query or expression to be alerted on
     </Alert>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    max-width: ${theme.breakpoints.values.sm}px;
+  `,
+});