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"
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>

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

@ -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;
}
}
}