From 51dcac4c34123001dce951f0c5893ff755c1f509 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Thu, 2 Jun 2022 16:19:13 +0200
Subject: [PATCH] Alerting: Fix alert creation form layout when errors occur
 (#50084)

---
 .../alerting/unified/components/rule-editor/DetailsStep.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
index 0462b64845f..5cefd9b21f5 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import classNames from 'classnames';
 import React, { FC } from 'react';
 import { useFormContext } from 'react-hook-form';
 
@@ -75,7 +76,7 @@ export const DetailsStep: FC = () => {
         dataSourceName && <GroupAndNamespaceFields rulesSourceName={dataSourceName} />}
 
       {ruleFormType === RuleFormType.grafana && (
-        <div className={styles.flexRow}>
+        <div className={classNames([styles.flexRow, styles.alignBaseline])}>
           <Field
             label={
               <Label htmlFor="folder" description={'Select a folder to store your rule.'}>
@@ -137,6 +138,9 @@ export const DetailsStep: FC = () => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
+  alignBaseline: css`
+    align-items: baseline;
+  `,
   formInput: css`
     width: 330px;
     & + & {