From e34c911cc8c9941c1395ff3919ddea593b4fe661 Mon Sep 17 00:00:00 2001
From: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
Date: Fri, 20 Jun 2025 14:12:42 +0530
Subject: [PATCH] fix(ui): carousel image being cropped for small width
 (#21869)

* fix(ui): carousel image being cropped for small width

* update sizing
---
 .../ui/src/pages/LoginPage/LoginCarousel.tsx  |  7 +++----
 .../ui/src/pages/LoginPage/login.style.less   | 21 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/LoginCarousel.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/LoginCarousel.tsx
index 83327dab8b1..85041db00d7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/LoginCarousel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/LoginCarousel.tsx
@@ -36,7 +36,7 @@ const LoginCarousel = () => {
           className="slider-container"
           data-testid="slider-container"
           key={uniqueId() + '-' + currentIndex + '-' + idx}>
-          <div className="d-flex flex-col gap-4">
+          <div className="text-container d-flex flex-col gap-4">
             <Typography.Title className="carousel-header display-md" level={1}>
               {t(`label.${data.title}`)}
             </Typography.Title>
@@ -46,9 +46,8 @@ const LoginCarousel = () => {
               {t(`message.${data.descriptionKey}`)}
             </p>
           </div>
-          <div className="image-container">
-            <img alt="slider" className="main-image" src={data.image} />
-          </div>
+
+          <img alt="slider" className="main-image" src={data.image} />
         </div>
       ))}
     </Carousel>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/login.style.less b/openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/login.style.less
index 834fa809872..27a40936b32 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/login.style.less
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/login.style.less
@@ -196,28 +196,27 @@
       height: 80vh !important;
 
       .slider-container {
-        max-width: 80%;
-        margin: 0 auto;
+        max-width: 100%;
         text-align: center;
         display: flex !important;
         flex-direction: column;
         align-items: center;
         justify-content: space-between;
         height: 100%;
-      }
 
-      .image-container {
-        position: relative;
-        width: 100%;
-        min-height: 420px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        .text-container {
+          max-width: 80%;
+          margin: 0 auto;
+          padding-bottom: 2rem;
+        }
       }
 
       .main-image {
-        max-height: 90%;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
         border-radius: 18px;
+        overflow: hidden;
       }
     }
   }