Copilot commented on code in PR #994:
URL:
https://github.com/apache/dolphinscheduler-website/pull/994#discussion_r3037959315
##########
src/views/UseCase/index.scss:
##########
@@ -2,181 +2,196 @@
@import "../../styles/mixin.scss";
.usecase {
+ overflow-x: hidden;
+
&-top {
- height: 350px;
+ min-height: 350px;
+ padding: 40px 20px;
display: flex;
justify-content: center;
align-items: center;
+ gap: 40px;
background-image: url("../../images/bg/banner_bg.png");
@include bg;
+ @media (max-width: 1024px) {
+ flex-direction: column;
+ text-align: center;
+ gap: 24px;
+ }
+
+ @media (max-width: 768px) {
+ padding: 40px 16px;
+ min-height: 260px;
+ }
+
&-bg {
- width: 492px;
- height: 350px;
+ width: 420px;
+ max-width: 100%;
+ aspect-ratio: 492 / 350;
background-image: url("../../images/bg/use-case.png");
@include bg-100;
- @media screen and (max-width: 640px) {
- display: none;
+ @media (max-width: 768px) {
+ width: 280px;
+ }
+
+ @media (max-width: 480px) {
+ width: 220px;
}
}
}
+
&-title {
font-weight: 700;
color: #031b3e;
- font-size: 68px;
- line-height: 90px;
- width: 780px;
+ font-size: 64px;
+ line-height: 1.2;
+ max-width: 780px;
- @media screen and (max-width: 640px) {
- width: 100%;
- font-size: 8vw;
- text-align: center;
+ @media (max-width: 1024px) {
+ font-size: 48px;
+ }
+
+ @media (max-width: 768px) {
+ font-size: 34px;
+ }
+
+ @media (max-width: 480px) {
+ font-size: 26px;
}
}
+
&-user {
- padding: 60px 0px 40px;
+ padding: 60px 20px 40px;
+
&-title {
font-weight: 700;
color: #031b3e;
font-size: 48px;
text-align: center;
- @media screen and (max-width: 640px) {
- font-size: 6vw;
+
+ @media (max-width: 768px) {
+ font-size: 32px;
+ }
+
+ @media (max-width: 480px) {
+ font-size: 24px;
}
}
+
&-list {
display: flex;
flex-wrap: wrap;
- padding-top: 60px;
- padding-left: 20px;
-
- @media screen and (max-width: 640px) {
- padding-top: 4vw;
- padding-left: 2vw;
- }
+ justify-content: center;
+ gap: 20px;
+ padding-top: 40px;
}
+
&-list-less {
- width: 1400px;
- justify-content: space-around;
+ max-width: 1400px;
margin: 0 auto;
}
+
.ant-image {
- box-shadow: 4px 6px 22px rgba(0, 0, 0, 0.11);
- margin-left: 10px;
- margin-right: 10px;
- margin-top: 20px;
border-radius: 10px;
+ box-shadow: 4px 6px 22px rgba(0, 0, 0, 0.11);
+
.ant-image-img {
- width: 250px !important;
- height: 113px !important;
+ width: 220px !important;
+ aspect-ratio: 250 / 113;
+ object-fit: contain;
border-radius: 10px;
- @media screen and (max-width: 640px) {
- width: 22vw !important;
- height: 9vw !important;
- border-radius: 3px;
+ @media (max-width: 768px) {
+ width: 160px !important;
+ }
+
+ @media (max-width: 480px) {
+ width: 120px !important;
}
- }
- @media screen and (max-width: 640px) {
- margin-left: 1vw;
- margin-right: 1vw;
- margin-top: 2vw;
- box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.11);
}
}
+
&-more {
text-align: center;
margin-top: 30px;
}
}
+
&-cases {
@include content-width;
Review Comment:
On large screens, `@include content-width` sets a fixed `width: 1280px` but
does not set `box-sizing: border-box`. Since this selector also adds horizontal
padding (`padding: 60px 20px 80px`), the rendered box can become wider than
1280px (width + left/right padding), reintroducing horizontal overflow.
Consider adding `box-sizing: border-box` to `.usecase-cases` (or avoid
horizontal padding when using fixed widths).
```suggestion
@include content-width;
box-sizing: border-box;
```
##########
src/views/UseCase/index.scss:
##########
@@ -2,181 +2,196 @@
@import "../../styles/mixin.scss";
.usecase {
+ overflow-x: hidden;
+
&-top {
- height: 350px;
+ min-height: 350px;
+ padding: 40px 20px;
display: flex;
justify-content: center;
align-items: center;
+ gap: 40px;
background-image: url("../../images/bg/banner_bg.png");
@include bg;
+ @media (max-width: 1024px) {
+ flex-direction: column;
+ text-align: center;
+ gap: 24px;
+ }
+
+ @media (max-width: 768px) {
+ padding: 40px 16px;
+ min-height: 260px;
+ }
+
&-bg {
- width: 492px;
- height: 350px;
+ width: 420px;
+ max-width: 100%;
+ aspect-ratio: 492 / 350;
background-image: url("../../images/bg/use-case.png");
@include bg-100;
- @media screen and (max-width: 640px) {
- display: none;
+ @media (max-width: 768px) {
+ width: 280px;
+ }
+
+ @media (max-width: 480px) {
+ width: 220px;
}
}
}
+
&-title {
font-weight: 700;
color: #031b3e;
- font-size: 68px;
- line-height: 90px;
- width: 780px;
+ font-size: 64px;
+ line-height: 1.2;
+ max-width: 780px;
- @media screen and (max-width: 640px) {
- width: 100%;
- font-size: 8vw;
- text-align: center;
+ @media (max-width: 1024px) {
+ font-size: 48px;
+ }
+
+ @media (max-width: 768px) {
+ font-size: 34px;
+ }
+
+ @media (max-width: 480px) {
+ font-size: 26px;
}
}
+
&-user {
- padding: 60px 0px 40px;
+ padding: 60px 20px 40px;
+
&-title {
font-weight: 700;
color: #031b3e;
font-size: 48px;
text-align: center;
- @media screen and (max-width: 640px) {
- font-size: 6vw;
+
+ @media (max-width: 768px) {
+ font-size: 32px;
+ }
+
+ @media (max-width: 480px) {
+ font-size: 24px;
}
}
+
&-list {
display: flex;
flex-wrap: wrap;
- padding-top: 60px;
- padding-left: 20px;
-
- @media screen and (max-width: 640px) {
- padding-top: 4vw;
- padding-left: 2vw;
- }
+ justify-content: center;
+ gap: 20px;
+ padding-top: 40px;
}
+
&-list-less {
- width: 1400px;
- justify-content: space-around;
+ max-width: 1400px;
margin: 0 auto;
}
+
.ant-image {
- box-shadow: 4px 6px 22px rgba(0, 0, 0, 0.11);
- margin-left: 10px;
- margin-right: 10px;
- margin-top: 20px;
border-radius: 10px;
+ box-shadow: 4px 6px 22px rgba(0, 0, 0, 0.11);
+
.ant-image-img {
- width: 250px !important;
- height: 113px !important;
+ width: 220px !important;
+ aspect-ratio: 250 / 113;
+ object-fit: contain;
border-radius: 10px;
- @media screen and (max-width: 640px) {
- width: 22vw !important;
- height: 9vw !important;
- border-radius: 3px;
+ @media (max-width: 768px) {
+ width: 160px !important;
+ }
+
+ @media (max-width: 480px) {
+ width: 120px !important;
}
- }
- @media screen and (max-width: 640px) {
- margin-left: 1vw;
- margin-right: 1vw;
- margin-top: 2vw;
- box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.11);
}
}
+
&-more {
text-align: center;
margin-top: 30px;
}
}
+
&-cases {
@include content-width;
margin: 0 auto;
- padding-top: 50px;
- padding-bottom: 70px;
+ padding: 60px 20px 80px;
- @media screen and (max-width: 640px) {
- width: 100vw;
- padding: 1vw;
- }
&-title {
font-weight: 700;
color: #031b3e;
font-size: 48px;
- line-height: 53px;
text-align: center;
- @media screen and (max-width: 640px) {
- font-size: 6vw;
- line-height: 1.5;
+
+ @media (max-width: 768px) {
+ font-size: 32px;
+ }
+
+ @media (max-width: 480px) {
+ font-size: 24px;
}
}
+
&-list {
- display: flex;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
Review Comment:
`grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))` can still
overflow on very small viewports (e.g., 320px wide screens, especially with
container padding), because the column minimum can’t shrink below 300px. This
is likely the root cause of needing `overflow-x: hidden` and can result in
clipped cards. Consider using a responsive minimum (e.g., `minmax(min(300px,
100%), 1fr)`), or add a breakpoint that switches to `grid-template-columns:
1fr` below ~360px.
```suggestion
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
```
##########
src/views/UseCase/index.scss:
##########
@@ -2,181 +2,196 @@
@import "../../styles/mixin.scss";
.usecase {
+ overflow-x: hidden;
+
Review Comment:
Setting `overflow-x: hidden` on the `.usecase` root can mask underlying
layout issues (e.g., fixed widths / grid min sizes) by clipping content instead
of making it responsive. If this was added to hide horizontal overflow from the
new layout, it’d be better to fix the overflowing child styles and only use
overflow clipping on the specific element that needs it.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
