From 38c826fd49d67596e226c5a08f81caa1536497f1 Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Tue, 25 Nov 2025 10:55:45 -0800
Subject: [PATCH] refactor: update CorrelationEditorTour layout and styles

---
 .../CorrelationEditor/CorrelationEditorTour.tsx    | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/public/app/features/explore/CorrelationEditor/CorrelationEditorTour.tsx b/public/app/features/explore/CorrelationEditor/CorrelationEditorTour.tsx
index 16a4c6e6298..7de5e048e05 100644
--- a/public/app/features/explore/CorrelationEditor/CorrelationEditorTour.tsx
+++ b/public/app/features/explore/CorrelationEditor/CorrelationEditorTour.tsx
@@ -178,7 +178,7 @@ export const CorrelationEditorTour = ({ onDismiss }: CorrelationEditorTourProps)
 
   return (
     <Modal isOpen={true} title={currentTourStep.title} onDismiss={handleComplete}>
-      <Stack direction="column" gap={2}>
+      <div className={styles.modalContent}>
         <div className={isTransitioning ? styles.contentTransitioning : styles.contentVisible}>
           {currentTourStep.content}
         </div>
@@ -186,7 +186,7 @@ export const CorrelationEditorTour = ({ onDismiss }: CorrelationEditorTourProps)
         <div className={styles.progressContainer}>
           <Stack direction="column" gap={1.5}>
             {/* Progress indicator */}
-            <Stack direction="row" gap={0.5} justifyContent="center">
+            <Stack direction="row" gap={0.5} justifyContent="center" alignItems="center">
               {tourSteps.map((_, index) => (
                 <div
                   key={index}
@@ -213,7 +213,7 @@ export const CorrelationEditorTour = ({ onDismiss }: CorrelationEditorTourProps)
             </Text>
           </Stack>
         </div>
-      </Stack>
+      </div>
 
       <Modal.ButtonRow>
         <Button variant="secondary" fill="outline" onClick={handleComplete}>
@@ -264,7 +264,14 @@ export const useCorrelationEditorTour = () => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
+  modalContent: css({
+    minHeight: '180px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  }),
   contentVisible: css({
+    minHeight: '180px',
     opacity: 1,
     [theme.transitions.handleMotion('no-preference')]: {
       transform: 'translateY(0)',
@@ -272,6 +279,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     },
   }),
   contentTransitioning: css({
+    minHeight: '180px',
     opacity: 0,
     [theme.transitions.handleMotion('no-preference')]: {
       transform: 'translateY(-8px)',