Alerting: Move modal buttons before the rules table (#59703)

Move modal buttons before the rules table

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

@@ -394,20 +394,7 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
             {checkEvaluationIntervalGlobalLimit(watch('groupInterval')).exceedsLimit && (
               <EvaluationIntervalLimitExceeded />
             )}
-            {rulerRuleRequests && (
+            <div className={styles.modalButtons}>
-              <>
-                <div>List of rules that belong to this group</div>
-                <div className={styles.evalRequiredLabel}>
-                  #Evaluations column represents the number of evaluations needed before alert starts firing.
-                </div>
-                <RulesForGroupTable
-                  rulerRules={groupfoldersForSource?.result}
-                  groupName={groupName}
-                  folderName={nameSpaceName}
-                />
-              </>
-            )}
-
               <Modal.ButtonRow>
                 <Button
                   variant="secondary"
@@ -426,6 +413,20 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
                   {loading ? 'Saving...' : 'Save changes'}
                 </Button>
               </Modal.ButtonRow>
+            </div>
+            {rulerRuleRequests && (
+              <>
+                <div>List of rules that belong to this group</div>
+                <div className={styles.evalRequiredLabel}>
+                  #Evaluations column represents the number of evaluations needed before alert starts firing.
+                </div>
+                <RulesForGroupTable
+                  rulerRules={groupfoldersForSource?.result}
+                  groupName={groupName}
+                  folderName={nameSpaceName}
+                />
+              </>
+            )}
           </>
         </form>
       </FormProvider>
@@ -437,6 +438,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
   modal: css`
     max-width: 560px;
   `,
+  modalButtons: css`
+    top: -24px;
+    position: relative;
+  `,
   formInput: css`
     width: 275px;
     & + & {