From 9655dc6ab6c6532dfd6ac0c50226b4b5787aeb32 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 10 Jun 2025 11:29:39 +0100
Subject: [PATCH] Carousel: Always center image (#106468)

always center image
---
 packages/grafana-ui/src/components/Carousel/Carousel.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Carousel/Carousel.tsx b/packages/grafana-ui/src/components/Carousel/Carousel.tsx
index f6ce2b239a2..b205eb4e7ac 100644
--- a/packages/grafana-ui/src/components/Carousel/Carousel.tsx
+++ b/packages/grafana-ui/src/components/Carousel/Carousel.tsx
@@ -143,7 +143,7 @@ export const Carousel: React.FC<CarouselProps> = ({ images }) => {
                 data-testid="previous-button"
               />
 
-              <div data-testid="carousel-full-image">
+              <div className={styles.imageContainer} data-testid="carousel-full-image">
                 <img
                   className={styles.imagePreview}
                   src={validImages[selectedIndex].path}
@@ -171,6 +171,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
   imageButton: css({
     textAlign: 'left',
   }),
+  imageContainer: css({
+    display: 'flex',
+    justifyContent: 'center',
+    flex: 1,
+  }),
   imagePreview: css({
     maxWidth: '100%',
     maxHeight: '80vh',