yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-15 12:37:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* update sizing
This commit is contained in:
Chirag Madlani 2025-06-20 14:12:42 +05:30 committed by GitHub
parent c729bd51ea
commit e34c911cc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/LoginCarousel.tsx
View File

@ -36,7 +36,7 @@ const LoginCarousel = () => {
className="slider-container" className="slider-container"
data-testid="slider-container" data-testid="slider-container"
key={uniqueId() + '-' + currentIndex + '-' + idx}> 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}> <Typography.Title className="carousel-header display-md" level={1}>
{t(`label.${data.title}`)} {t(`label.${data.title}`)}
</Typography.Title> </Typography.Title>
@ -46,9 +46,8 @@ const LoginCarousel = () => {
{t(`message.${data.descriptionKey}`)} {t(`message.${data.descriptionKey}`)}
</p> </p>
</div> </div>
<div className="image-container">
<img alt="slider" className="main-image" src={data.image} /> <img alt="slider" className="main-image" src={data.image} />
</div>
</div> </div>
))} ))}
</Carousel> </Carousel>

21
openmetadata-ui/src/main/resources/ui/src/pages/LoginPage/login.style.less
View File

@ -196,28 +196,27 @@
height: 80vh !important; height: 80vh !important;
.slider-container { .slider-container {
max-width: 80%; max-width: 100%;
margin: 0 auto;
text-align: center; text-align: center;
display: flex !important; display: flex !important;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
}
.image-container { .text-container {
position: relative; max-width: 80%;
width: 100%; margin: 0 auto;
min-height: 420px; padding-bottom: 2rem;
display: flex; }
justify-content: center;
align-items: center;
} }
.main-image { .main-image {
max-height: 90%; width: 100%;
height: 100%;
object-fit: contain;
border-radius: 18px; border-radius: 18px;
overflow: hidden;
} }
} }
} }