Alerting: Center "need help" icons (#87981)

public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx

@@ -37,7 +37,7 @@ export const MatcherFilter = ({ onFilterChange, defaultQueryString }: Props) =>
       error={inputInvalid ? 'Query must use valid matcher syntax. See the examples in the help tooltip.' : null}
       label={
         <Label>
-          <Stack gap={0.5}>
+          <Stack gap={0.5} alignItems="center">
             <span>Search by label</span>
             <Tooltip
               content={

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

@@ -90,7 +90,7 @@ const AnnotationsStep = () => {
 
   function getAnnotationsSectionDescription() {
     return (
-      <Stack direction="row" gap={0.5} alignItems="baseline">
+      <Stack direction="row" gap={0.5} alignItems="center">
         <Text variant="bodySmall" color="secondary">
           Add more context in your notification messages.
         </Text>

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

@@ -208,7 +208,7 @@ function getDescription() {
   const docsLink = 'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/rule-evaluation/';
 
   return (
-    <Stack direction="row" gap={0.5} alignItems="baseline">
+    <Stack direction="row" gap={0.5} alignItems="center">
       <Text variant="bodySmall" color="secondary">
         Define how the alert rule is evaluated.
       </Text>

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

@@ -17,7 +17,7 @@ export function NeedHelpInfo({ contentText, externalLink, linkText, title = 'Nee
     <Toggletip
       content={<div className={styles.mutedText}>{contentText}</div>}
       title={
-        <Stack gap={1} direction="row">
+        <Stack gap={0.5} direction="row" alignItems="center">
           <Icon name="question-circle" />
           {title}
         </Stack>

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

@@ -54,7 +54,7 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
       stepNo={4}
       title={type === RuleFormType.cloudRecording ? 'Add labels' : 'Configure labels and notifications'}
       description={
-        <Stack direction="row" gap={0.5} alignItems="baseline">
+        <Stack direction="row" gap={0.5} alignItems="center">
           {type === RuleFormType.cloudRecording ? (
             <Text variant="bodySmall" color="secondary">
               Add labels to help you better manage your recording rules
@@ -122,7 +122,7 @@ function ManualAndAutomaticRouting({ alertUid }: { alertUid?: string }) {
   };
 
   return (
-    <Stack direction="column">
+    <Stack direction="column" gap={2}>
       <Stack direction="column">
         <RadioButtonGroup
           options={routingOptions}
@@ -243,35 +243,25 @@ interface NotificationsStepDescriptionProps {
 }
 
 export const RoutingOptionDescription = ({ manualRouting }: NotificationsStepDescriptionProps) => {
-  const styles = useStyles2(getStyles);
   return (
-    <div className={styles.notificationsOptionDescription}>
+    <Stack alignItems="center">
       <Text variant="bodySmall" color="secondary">
         {manualRouting
           ? 'Notifications for firing alerts are routed to a selected contact point.'
           : 'Notifications for firing alerts are routed to contact points based on matching labels and the notification policy tree.'}
       </Text>
       {manualRouting ? <NeedHelpInfoForContactpoint /> : <NeedHelpInfoForNotificationPolicy />}
-    </div>
+    </Stack>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
   routingOptions: css({
-    marginTop: theme.spacing(2),
     width: 'fit-content',
   }),
   configureNotifications: css({
     display: 'flex',
     flexDirection: 'column',
-    gap: theme.spacing(1),
     marginTop: theme.spacing(2),
   }),
-  notificationsOptionDescription: css({
-    marginTop: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'baseline',
-    gap: theme.spacing(0.5),
-  }),
 });

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx

@@ -98,7 +98,7 @@ export function SmartAlertTypeDetector({
     <Stack direction="column" gap={1} alignItems="flex-start">
       <Stack direction="column" gap={0}>
         <Text variant="h5">Rule type</Text>
-        <Stack direction="row" gap={0.5} alignItems="baseline">
+        <Stack direction="row" gap={0.5} alignItems="center">
           <Text variant="bodySmall" color="secondary">
             Select where the alert rule will be managed.
           </Text>

public/app/features/alerting/unified/components/rules/RulesFilter.tsx

@@ -148,7 +148,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
             className={styles.dsPickerContainer}
             label={
               <Label htmlFor="data-source-picker">
-                <Stack gap={0.5}>
+                <Stack gap={0.5} alignItems="center">
                   <span>Search by data sources</span>
                   <Tooltip
                     content={
@@ -249,7 +249,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
               <Field
                 label={
                   <Label htmlFor="rulesSearchInput">
-                    <Stack gap={0.5}>
+                    <Stack gap={0.5} alignItems="center">
                       <span>Search</span>
                       <HoverCard content={<SearchQueryHelp />}>
                         <Icon name="info-circle" size="sm" tabIndex={0} title="Search help" />

public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx

@@ -82,7 +82,7 @@ const StateHistory = ({ alertId }: Props) => {
         <Field
           label={
             <Label>
-              <Stack gap={0.5}>
+              <Stack gap={0.5} alignItems="center">
                 <span>Filter group</span>
                 <Tooltip
                   content={