From 032fcc1eaac88b744de4d0a574e387a7ca650856 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Tue, 28 Jul 2026 09:18:25 +0000 Subject: [PATCH 1/6] fix(meshery): fix black overlay and carousel layout on scroll (#7889) Signed-off-by: GitHub --- .../features-section.style.js | 519 ++++++++---------- 1 file changed, 219 insertions(+), 300 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index 298ebcf3d9a6e6..70ed25f2be0035 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -1,306 +1,225 @@ import styled from "styled-components"; const FeaturesSectionWrapper = styled.section` - - background-color: black; - transform: skew(0deg, -6deg); - padding-bottom: 5rem; - margin-bottom: 8rem; - overflow: hidden; - position: relative; - width: 100%; - max-width: 100%; - contain: layout style paint; - transform-origin: center; - z-index: 1; - height: auto; - isolate: isolate; - .skw{ - display: grid; - position: relative; - top: -5rem; - } - .rect-1-left { - background: #C9FCF6; - border-radius: 0 2.125rem 0 0; - grid-column: 1/ span 2; - height: 5rem; - grid-row: 1; - position: relative; - top: 0.5px; - } - .rect-2-left { - background: ${(props) => props.theme.secondaryColor}; - border-radius: 0 0 3.5rem 0; - grid-column: 1/2; - height: 5rem; - grid-row: 2; - } - .rect-3-right { - background: ${(props) => props.theme.secondaryColor}; - border-radius: 3.5rem 0 0 0; - grid-column: 10/11; - grid-row: 1; - height: 5rem; - } - .rect-4-right { - background: #C9FCF6; - border-radius: 0 0 0 2.125rem; - grid-column: 9/11; - grid-row: 2; - height: 5rem; - position: relative; - top: -0.75px - } - - .section-data { - transform: skew(0deg, 6deg); - padding: 0 1rem 3rem; - text-align: center; - position: relative; - z-index: 1; - h1, h2, p { - color: white; - } - } - - .meshery-logo { - img { - max-height: 8rem; - } - } - .section-header { - margin-top: 3rem; - h1 { - line-height: 3.125rem; - span { - color: ${(props) => props.theme.secondaryColor}; - } - } - h2 { - font-weight: 400; - } - p { - font-size: 1.25rem; - line-height: 1.25rem; - margin: 1rem 0 0; - } - } - .smp-section { - margin: 3rem auto; - max-width: 85%; - overflow: hidden; - - .smp-section-row { - margin: 4rem 0; - align-items: center; - } - h2, h4 { - color: white; - } - .smp-section-data { - h1, h2, p { - text-align: start; color: white; - } - h2 { - font-size: 1.75rem; - font-weight: 500; - } - } - - .smp-section-carousel { - .slick-slider { - max-height: 520px; - .slick-list { - max-width: 50rem; - max-height: 520px; - height: auto; - - .slick-track { - height: auto; - } - - .slick-slide { - height: auto; - img { - max-height: 20rem; - margin: auto; - } - } - } - - .slick-arrow{ - display: none !important; - } - - .slick-dots { - bottom: 0; - top: 0rem; - left: 52rem; - width: 8rem; - - li { - display: block; - width: 100%; - height: auto; - margin: 1rem auto; - opacity: 0.6; - - p { - display: block; - - img { - height: 5rem; - vertical-align: middle; - } - } - } - } - .slick-dots - li.slick-active { - opacity: 1; - } - } - } - } - } - - @media screen and (max-width: 1600px) { - .smp-section .smp-section-carousel .slick-slider { - .slick-list { - max-width: 38rem; - } - - .slick-dots { - left: 40rem; - width: 6rem; - - li p img { - height: 4rem; - } - } - } - } - - @media screen and (max-width: 1200px) { - padding-bottom: 2rem; - margin-bottom: 6rem; - - .smp-section { - .smp-section-row { - margin: 2.5rem 0; - } - - .smp-section-data { - h3, p { - text-align: center; - } - } - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 80%; - margin: 2rem auto; - } - - .slick-dots { - left: 92%; - } - } - } - } - - @media screen and (max-width: 960px) { - padding-bottom: 0rem; - margin-bottom: 4rem; - .smp-section .smp-section-carousel .slick-slider .slick-list { - .slick-slide { - img { - max-height: 16rem; - } - } - } - } - - @media screen and (max-width: 700px) { - .smp-section { - max-width: 95%; - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 85%; - margin: 2rem 0; - } - .slick-dots { - left: 90%; - width: 4rem; - - li p img { - height: 2.5rem; - } - } - } - } - } - - @media screen and (max-width: 500px) { - .smp-section { - max-width: 95%; - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 80%; - .slick-slide { - img { - max-height: 10rem; - } - } - } - .slick-dots { - left: 85%; - top: -1rem; - } - } - } - } - - .mesh-mngmnt { - h3 { - margin: 1rem 0; - color: rgba(255, 255, 255, 0.6); - font-size: 1.5rem; - } - p { - margin: 0.5rem 0; - color: rgba(255, 255, 255, 0.6); - } - - .mesh-mngmnt-btn { - margin: 2rem auto; - display: flex; - flex-wrap: wrap; - max-width: 75%; - - .mgmt_button { - margin: 0.5rem 0; - min-width: 15rem; - border-radius: 1rem; - } - } - } - - @media screen and (max-width: 992px) { - .mesh-mngmnt { - .mesh-mngmnt-btn { - justify-content: center; - - .mgmt_button { - margin: 0.5rem auto; - min-width: 11rem; - } - } - } - } + background-color: black; + padding: 4rem 0 5rem 0; + margin-bottom: 6rem; + position: relative; + width: 100%; + max-width: 100%; + z-index: 1; + height: auto; + + .skw { + display: grid; + position: relative; + top: -4rem; + } + .rect-1-left { + background: #c9fcf6; + border-radius: 0 2.125rem 0 0; + grid-column: 1 / span 2; + height: 4rem; + grid-row: 1; + } + .rect-2-left { + background: ${(props) => props.theme.secondaryColor}; + border-radius: 0 0 3.5rem 0; + grid-column: 1 / 2; + height: 4rem; + grid-row: 2; + } + .rect-3-right { + background: ${(props) => props.theme.secondaryColor}; + border-radius: 3.5rem 0 0 0; + grid-column: 10 / 11; + grid-row: 1; + height: 4rem; + } + .rect-4-right { + background: #c9fcf6; + border-radius: 0 0 0 2.125rem; + grid-column: 9 / 11; + grid-row: 2; + height: 4rem; + } + + .section-data { + padding: 0 2rem 3rem; + text-align: center; + position: relative; + z-index: 1; + width: 100%; + margin: 0 auto; + + h1, + h2, + p { + color: white; + } + } + + .meshery-logo { + img { + max-height: 8rem; + } + } + + .section-header { + margin-top: 1rem; + h1 { + line-height: 3.125rem; + span { + color: ${(props) => props.theme.secondaryColor}; + } + } + h2 { + font-weight: 400; + } + p { + font-size: 1.25rem; + line-height: 1.6rem; + margin: 1rem auto 0; + max-width: 50rem; + } + } + + .smp-section { + margin: 3rem auto; + width: 100%; + max-width: 1200px; + + .smp-section-row { + margin: 4rem 0; + align-items: center; + display: flex; + flex-wrap: wrap; + } + + h2, + h4 { + color: white; + } + + .smp-section-data { + h1, + h2, + p { + text-align: start; + color: white; + } + h2 { + font-size: 1.75rem; + font-weight: 500; + } + } + + .smp-section-carousel { + width: 100%; + + .slick-slider { + position: relative; + display: block; + box-sizing: border-box; + + .slick-list { + width: 100%; + margin: 0 auto; + + .slick-slide { + img { + max-height: 22rem; + width: auto; + margin: auto; + border-radius: 0.5rem; + } + } + } + + .slick-arrow { + display: none !important; + } + + .slick-dots { + position: absolute; + right: -2rem; + top: 50%; + transform: translateY(-50%); + width: 5rem; + list-style: none; + + li { + display: block; + width: 100%; + margin: 0.75rem 0; + opacity: 0.5; + transition: opacity 0.3s ease; + + p img { + height: 3.5rem; + width: auto; + border-radius: 0.25rem; + } + } + + li.slick-active { + opacity: 1; + } + } + } + } + } + + .mesh-mngmnt { + margin-top: 4rem; + h3 { + margin: 1rem 0; + color: rgba(255, 255, 255, 0.7); + font-size: 1.5rem; + } + p { + margin: 0.5rem 0; + color: rgba(255, 255, 255, 0.7); + } + + .mesh-mngmnt-btn { + margin: 2rem auto; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + max-width: 100%; + + .mgmt_button { + min-width: 12rem; + border-radius: 1rem; + } + } + } + + @media screen and (max-width: 992px) { + .smp-section { + .smp-section-carousel { + .slick-slider { + .slick-dots { + position: relative; + right: auto; + top: auto; + transform: none; + width: 100%; + display: flex !important; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + + li p img { + height: 2.5rem; + } + } + } + } + } + } `; export default FeaturesSectionWrapper; From f0c1cc05d5d869533c67d63073ff2d2e619ed9e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Wed, 29 Jul 2026 19:19:43 +0000 Subject: [PATCH 2/6] fix(styles): revert lint formatting and preserve original tab structure Signed-off-by: GitHub --- .../features-section.style.js | 241 +++++++++++++----- 1 file changed, 177 insertions(+), 64 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index 70ed25f2be0035..714b4c225f1b74 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -2,14 +2,13 @@ import styled from "styled-components"; const FeaturesSectionWrapper = styled.section` background-color: black; - padding: 4rem 0 5rem 0; + padding-bottom: 5rem; margin-bottom: 6rem; position: relative; width: 100%; max-width: 100%; z-index: 1; height: auto; - .skw { display: grid; position: relative; @@ -21,37 +20,38 @@ const FeaturesSectionWrapper = styled.section` grid-column: 1 / span 2; height: 4rem; grid-row: 1; + position: relative; + top: 0.5px; } .rect-2-left { background: ${(props) => props.theme.secondaryColor}; border-radius: 0 0 3.5rem 0; - grid-column: 1 / 2; + grid-column: 1/2; height: 4rem; grid-row: 2; } .rect-3-right { background: ${(props) => props.theme.secondaryColor}; border-radius: 3.5rem 0 0 0; - grid-column: 10 / 11; + grid-column: 10/11; grid-row: 1; height: 4rem; } .rect-4-right { background: #c9fcf6; border-radius: 0 0 0 2.125rem; - grid-column: 9 / 11; + grid-column: 9/11; grid-row: 2; height: 4rem; + position: relative; + top: -0.75px; } .section-data { - padding: 0 2rem 3rem; + padding: 0 1rem 3rem; text-align: center; position: relative; z-index: 1; - width: 100%; - margin: 0 auto; - h1, h2, p { @@ -64,9 +64,8 @@ const FeaturesSectionWrapper = styled.section` max-height: 8rem; } } - .section-header { - margin-top: 1rem; + margin-top: 3rem; h1 { line-height: 3.125rem; span { @@ -78,29 +77,23 @@ const FeaturesSectionWrapper = styled.section` } p { font-size: 1.25rem; - line-height: 1.6rem; - margin: 1rem auto 0; - max-width: 50rem; + line-height: 1.25rem; + margin: 1rem 0 0; } } - .smp-section { margin: 3rem auto; - width: 100%; - max-width: 1200px; + max-width: 85%; + overflow: hidden; .smp-section-row { margin: 4rem 0; align-items: center; - display: flex; - flex-wrap: wrap; } - h2, h4 { color: white; } - .smp-section-data { h1, h2, @@ -115,50 +108,66 @@ const FeaturesSectionWrapper = styled.section` } .smp-section-carousel { - width: 100%; - .slick-slider { position: relative; - display: block; - box-sizing: border-box; + max-height: 520px; .slick-list { - width: 100%; - margin: 0 auto; + max-width: calc(100% - 6rem); + max-height: 520px; + height: auto; + + .slick-track { + height: auto; + } .slick-slide { + height: auto; img { - max-height: 22rem; - width: auto; + max-height: 20rem; + width: 100%; + object-fit: contain; + aspect-ratio: 16 / 9; margin: auto; - border-radius: 0.5rem; } } } .slick-arrow { - display: none !important; + display: none; } .slick-dots { position: absolute; - right: -2rem; + right: 0; top: 50%; transform: translateY(-50%); width: 5rem; list-style: none; + margin: 0; + padding: 0; li { display: block; width: 100%; - margin: 0.75rem 0; - opacity: 0.5; - transition: opacity 0.3s ease; - - p img { - height: 3.5rem; - width: auto; - border-radius: 0.25rem; + height: auto; + margin: 1rem auto; + opacity: 0.6; + + &:focus-visible, + button:focus-visible { + outline: 2px solid ${(props) => props.theme.secondaryColor}; + outline-offset: 2px; + border-radius: 4px; + } + + p { + display: block; + + img { + height: 5rem; + vertical-align: middle; + } } } @@ -170,52 +179,156 @@ const FeaturesSectionWrapper = styled.section` } } + @media screen and (max-width: 1600px) { + .smp-section .smp-section-carousel .slick-slider { + .slick-list { + max-width: 38rem; + } + + .slick-dots { + left: 40rem; + width: 6rem; + + li p img { + height: 4rem; + } + } + } + } + + @media screen and (max-width: 1200px) { + padding-bottom: 2rem; + margin-bottom: 6rem; + + .smp-section { + .smp-section-row { + margin: 2.5rem 0; + } + + .smp-section-data { + h3, + p { + text-align: center; + } + } + + .smp-section-carousel .slick-slider { + .slick-list { + max-width: 80%; + margin: 2rem auto; + + .slick-slide img { + max-height: 18rem; + } + } + + .slick-dots { + position: relative; + left: 0; + right: auto; + top: auto; + transform: none; + width: 100%; + display: flex; + justify-content: center; + gap: 1rem; + + li { + width: auto; + margin: 0; + } + } + } + } + } + + @media screen and (max-width: 960px) { + padding-bottom: 0rem; + margin-bottom: 4rem; + .smp-section .smp-section-carousel .slick-slider .slick-list { + .slick-slide { + img { + max-height: 16rem; + } + } + } + } + + @media screen and (max-width: 700px) { + .smp-section { + max-width: 95%; + + .smp-section-carousel .slick-slider { + .slick-list { + max-width: 85%; + margin: 2rem 0; + } + .slick-dots { + left: 90%; + width: 4rem; + + li p img { + height: 2.5rem; + } + } + } + } + } + + @media screen and (max-width: 500px) { + .smp-section { + max-width: 95%; + + .smp-section-carousel .slick-slider { + .slick-list { + max-width: 80%; + .slick-slide { + img { + max-height: 10rem; + } + } + } + .slick-dots { + left: 85%; + top: -1rem; + } + } + } + } + .mesh-mngmnt { - margin-top: 4rem; h3 { margin: 1rem 0; - color: rgba(255, 255, 255, 0.7); + color: rgba(255, 255, 255, 0.6); font-size: 1.5rem; } p { margin: 0.5rem 0; - color: rgba(255, 255, 255, 0.7); + color: rgba(255, 255, 255, 0.6); } .mesh-mngmnt-btn { margin: 2rem auto; display: flex; - justify-content: center; flex-wrap: wrap; - gap: 1rem; - max-width: 100%; + max-width: 75%; .mgmt_button { - min-width: 12rem; + margin: 0.5rem 0; + min-width: 15rem; border-radius: 1rem; } } } @media screen and (max-width: 992px) { - .smp-section { - .smp-section-carousel { - .slick-slider { - .slick-dots { - position: relative; - right: auto; - top: auto; - transform: none; - width: 100%; - display: flex !important; - justify-content: center; - gap: 1rem; - margin-top: 1rem; + .mesh-mngmnt { + .mesh-mngmnt-btn { + justify-content: center; - li p img { - height: 2.5rem; - } - } + .mgmt_button { + margin: 0.5rem auto; + min-width: 11rem; } } } From 3c2a2a0030192966a18e42b232ab577f4feaecea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Wed, 29 Jul 2026 19:31:08 +0000 Subject: [PATCH 3/6] fix(styles): remove stale left offsets on mobile carousel dots Signed-off-by: GitHub --- src/sections/Meshery/Features-section/features-section.style.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index 714b4c225f1b74..75cb2cc0c4ef0b 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -264,7 +264,6 @@ const FeaturesSectionWrapper = styled.section` margin: 2rem 0; } .slick-dots { - left: 90%; width: 4rem; li p img { @@ -289,7 +288,6 @@ const FeaturesSectionWrapper = styled.section` } } .slick-dots { - left: 85%; top: -1rem; } } From 70465a8fc4f033dab2ac9b5161f8f670a60d8e6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Thu, 30 Jul 2026 07:36:51 +0000 Subject: [PATCH 4/6] refactor(styles): simplify nested media queries and clean up mobile dot controls Signed-off-by: GitHub --- .../features-section.style.js | 219 ++++++++---------- 1 file changed, 92 insertions(+), 127 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index 75cb2cc0c4ef0b..5ab5cd9c440fa0 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -9,6 +9,15 @@ const FeaturesSectionWrapper = styled.section` max-width: 100%; z-index: 1; height: auto; + + @media screen and (max-width: 1200px) { + padding-bottom: 2rem; + } + @media screen and (max-width: 960px) { + padding-bottom: 0rem; + margin-bottom: 4rem; + } + .skw { display: grid; position: relative; @@ -26,21 +35,21 @@ const FeaturesSectionWrapper = styled.section` .rect-2-left { background: ${(props) => props.theme.secondaryColor}; border-radius: 0 0 3.5rem 0; - grid-column: 1/2; + grid-column: 1 / 2; height: 4rem; grid-row: 2; } .rect-3-right { background: ${(props) => props.theme.secondaryColor}; border-radius: 3.5rem 0 0 0; - grid-column: 10/11; + grid-column: 10 / 11; grid-row: 1; height: 4rem; } .rect-4-right { background: #c9fcf6; border-radius: 0 0 0 2.125rem; - grid-column: 9/11; + grid-column: 9 / 11; grid-row: 2; height: 4rem; position: relative; @@ -52,6 +61,7 @@ const FeaturesSectionWrapper = styled.section` text-align: center; position: relative; z-index: 1; + h1, h2, p { @@ -64,10 +74,13 @@ const FeaturesSectionWrapper = styled.section` max-height: 8rem; } } + .section-header { margin-top: 3rem; + h1 { line-height: 3.125rem; + span { color: ${(props) => props.theme.secondaryColor}; } @@ -81,25 +94,40 @@ const FeaturesSectionWrapper = styled.section` margin: 1rem 0 0; } } + .smp-section { margin: 3rem auto; max-width: 85%; overflow: hidden; + @media screen and (max-width: 700px), screen and (max-width: 500px) { + max-width: 95%; + } + .smp-section-row { margin: 4rem 0; align-items: center; + + @media screen and (max-width: 1200px) { + margin: 2.5rem 0; + } } + h2, h4 { color: white; } + .smp-section-data { h1, h2, p { text-align: start; color: white; + + @media screen and (max-width: 1200px) { + text-align: center; + } } h2 { font-size: 1.75rem; @@ -117,18 +145,44 @@ const FeaturesSectionWrapper = styled.section` max-height: 520px; height: auto; + @media screen and (max-width: 1600px) { + max-width: 38rem; + } + @media screen and (max-width: 1200px) { + max-width: 80%; + margin: 2rem auto; + } + @media screen and (max-width: 700px) { + max-width: 85%; + margin: 2rem 0; + } + @media screen and (max-width: 500px) { + max-width: 80%; + } + .slick-track { height: auto; } .slick-slide { height: auto; + img { max-height: 20rem; width: 100%; object-fit: contain; aspect-ratio: 16 / 9; margin: auto; + + @media screen and (max-width: 1200px) { + max-height: 18rem; + } + @media screen and (max-width: 960px) { + max-height: 16rem; + } + @media screen and (max-width: 500px) { + max-height: 10rem; + } } } } @@ -147,6 +201,24 @@ const FeaturesSectionWrapper = styled.section` margin: 0; padding: 0; + @media screen and (max-width: 1600px) { + left: 40rem; + width: 6rem; + } + + @media screen and (max-width: 1200px) { + position: relative; + left: 0; + right: auto; + top: auto; + transform: none; + width: 100%; + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + } + li { display: block; width: 100%; @@ -154,6 +226,11 @@ const FeaturesSectionWrapper = styled.section` margin: 1rem auto; opacity: 0.6; + @media screen and (max-width: 1200px) { + width: auto; + margin: 0; + } + &:focus-visible, button:focus-visible { outline: 2px solid ${(props) => props.theme.secondaryColor}; @@ -167,6 +244,13 @@ const FeaturesSectionWrapper = styled.section` img { height: 5rem; vertical-align: middle; + + @media screen and (max-width: 1600px) { + height: 4rem; + } + @media screen and (max-width: 700px) { + height: 2.5rem; + } } } } @@ -179,121 +263,6 @@ const FeaturesSectionWrapper = styled.section` } } - @media screen and (max-width: 1600px) { - .smp-section .smp-section-carousel .slick-slider { - .slick-list { - max-width: 38rem; - } - - .slick-dots { - left: 40rem; - width: 6rem; - - li p img { - height: 4rem; - } - } - } - } - - @media screen and (max-width: 1200px) { - padding-bottom: 2rem; - margin-bottom: 6rem; - - .smp-section { - .smp-section-row { - margin: 2.5rem 0; - } - - .smp-section-data { - h3, - p { - text-align: center; - } - } - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 80%; - margin: 2rem auto; - - .slick-slide img { - max-height: 18rem; - } - } - - .slick-dots { - position: relative; - left: 0; - right: auto; - top: auto; - transform: none; - width: 100%; - display: flex; - justify-content: center; - gap: 1rem; - - li { - width: auto; - margin: 0; - } - } - } - } - } - - @media screen and (max-width: 960px) { - padding-bottom: 0rem; - margin-bottom: 4rem; - .smp-section .smp-section-carousel .slick-slider .slick-list { - .slick-slide { - img { - max-height: 16rem; - } - } - } - } - - @media screen and (max-width: 700px) { - .smp-section { - max-width: 95%; - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 85%; - margin: 2rem 0; - } - .slick-dots { - width: 4rem; - - li p img { - height: 2.5rem; - } - } - } - } - } - - @media screen and (max-width: 500px) { - .smp-section { - max-width: 95%; - - .smp-section-carousel .slick-slider { - .slick-list { - max-width: 80%; - .slick-slide { - img { - max-height: 10rem; - } - } - } - .slick-dots { - top: -1rem; - } - } - } - } - .mesh-mngmnt { h3 { margin: 1rem 0; @@ -311,20 +280,16 @@ const FeaturesSectionWrapper = styled.section` flex-wrap: wrap; max-width: 75%; + @media screen and (max-width: 992px) { + justify-content: center; + } + .mgmt_button { margin: 0.5rem 0; min-width: 15rem; border-radius: 1rem; - } - } - } - - @media screen and (max-width: 992px) { - .mesh-mngmnt { - .mesh-mngmnt-btn { - justify-content: center; - .mgmt_button { + @media screen and (max-width: 992px) { margin: 0.5rem auto; min-width: 11rem; } From b96092bdfd3bffcdeadf15d451c97930ca125d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Thu, 6 Aug 2026 07:01:27 +0000 Subject: [PATCH 5/6] fix(styles): improve mobile and ipad responsiveness and text scaling for meshery features section Signed-off-by: GitHub --- .../features-section.style.js | 290 +++++++++++------- 1 file changed, 186 insertions(+), 104 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index 5ab5cd9c440fa0..ae3b394935ab51 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -2,32 +2,28 @@ import styled from "styled-components"; const FeaturesSectionWrapper = styled.section` background-color: black; + transform: skew(0deg, -6deg); padding-bottom: 5rem; - margin-bottom: 6rem; + margin-bottom: 8rem; + overflow: hidden; position: relative; width: 100%; max-width: 100%; + contain: layout style paint; + transform-origin: center; z-index: 1; height: auto; - - @media screen and (max-width: 1200px) { - padding-bottom: 2rem; - } - @media screen and (max-width: 960px) { - padding-bottom: 0rem; - margin-bottom: 4rem; - } - + isolate: isolate; .skw { display: grid; position: relative; - top: -4rem; + top: -5rem; } .rect-1-left { background: #c9fcf6; border-radius: 0 2.125rem 0 0; grid-column: 1 / span 2; - height: 4rem; + height: 5rem; grid-row: 1; position: relative; top: 0.5px; @@ -35,33 +31,33 @@ const FeaturesSectionWrapper = styled.section` .rect-2-left { background: ${(props) => props.theme.secondaryColor}; border-radius: 0 0 3.5rem 0; - grid-column: 1 / 2; - height: 4rem; + grid-column: 1/2; + height: 5rem; grid-row: 2; } .rect-3-right { background: ${(props) => props.theme.secondaryColor}; border-radius: 3.5rem 0 0 0; - grid-column: 10 / 11; + grid-column: 10/11; grid-row: 1; - height: 4rem; + height: 5rem; } .rect-4-right { background: #c9fcf6; border-radius: 0 0 0 2.125rem; - grid-column: 9 / 11; + grid-column: 9/11; grid-row: 2; - height: 4rem; + height: 5rem; position: relative; top: -0.75px; } .section-data { + transform: skew(0deg, 6deg); padding: 0 1rem 3rem; text-align: center; position: relative; z-index: 1; - h1, h2, p { @@ -74,13 +70,10 @@ const FeaturesSectionWrapper = styled.section` max-height: 8rem; } } - .section-header { margin-top: 3rem; - h1 { line-height: 3.125rem; - span { color: ${(props) => props.theme.secondaryColor}; } @@ -94,40 +87,31 @@ const FeaturesSectionWrapper = styled.section` margin: 1rem 0 0; } } - .smp-section { margin: 3rem auto; max-width: 85%; overflow: hidden; - @media screen and (max-width: 700px), screen and (max-width: 500px) { - max-width: 95%; - } - .smp-section-row { margin: 4rem 0; align-items: center; @media screen and (max-width: 1200px) { - margin: 2.5rem 0; + display: flex; + flex-direction: column; + gap: 2rem; } } - h2, h4 { color: white; } - .smp-section-data { h1, h2, p { text-align: start; color: white; - - @media screen and (max-width: 1200px) { - text-align: center; - } } h2 { font-size: 1.75rem; @@ -136,53 +120,29 @@ const FeaturesSectionWrapper = styled.section` } .smp-section-carousel { + width: 100%; + .slick-slider { position: relative; max-height: 520px; .slick-list { - max-width: calc(100% - 6rem); + max-width: 50rem; max-height: 520px; height: auto; - @media screen and (max-width: 1600px) { - max-width: 38rem; - } - @media screen and (max-width: 1200px) { - max-width: 80%; - margin: 2rem auto; - } - @media screen and (max-width: 700px) { - max-width: 85%; - margin: 2rem 0; - } - @media screen and (max-width: 500px) { - max-width: 80%; - } - .slick-track { height: auto; } .slick-slide { height: auto; - img { max-height: 20rem; width: 100%; object-fit: contain; aspect-ratio: 16 / 9; margin: auto; - - @media screen and (max-width: 1200px) { - max-height: 18rem; - } - @media screen and (max-width: 960px) { - max-height: 16rem; - } - @media screen and (max-width: 500px) { - max-height: 10rem; - } } } } @@ -192,32 +152,10 @@ const FeaturesSectionWrapper = styled.section` } .slick-dots { - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - width: 5rem; - list-style: none; - margin: 0; - padding: 0; - - @media screen and (max-width: 1600px) { - left: 40rem; - width: 6rem; - } - - @media screen and (max-width: 1200px) { - position: relative; - left: 0; - right: auto; - top: auto; - transform: none; - width: 100%; - display: flex; - justify-content: center; - gap: 1rem; - margin-top: 1rem; - } + bottom: 0; + top: 0rem; + left: 52rem; + width: 8rem; li { display: block; @@ -226,11 +164,6 @@ const FeaturesSectionWrapper = styled.section` margin: 1rem auto; opacity: 0.6; - @media screen and (max-width: 1200px) { - width: auto; - margin: 0; - } - &:focus-visible, button:focus-visible { outline: 2px solid ${(props) => props.theme.secondaryColor}; @@ -244,13 +177,6 @@ const FeaturesSectionWrapper = styled.section` img { height: 5rem; vertical-align: middle; - - @media screen and (max-width: 1600px) { - height: 4rem; - } - @media screen and (max-width: 700px) { - height: 2.5rem; - } } } } @@ -263,6 +189,151 @@ const FeaturesSectionWrapper = styled.section` } } + @media screen and (max-width: 1600px) { + .smp-section .smp-section-carousel .slick-slider { + .slick-list { + max-width: 38rem; + } + + .slick-dots { + left: 40rem; + width: 6rem; + + li p img { + height: 4rem; + } + } + } + } + + @media screen and (max-width: 1200px) { + padding-bottom: 2rem; + margin-bottom: 6rem; + + .smp-section { + .smp-section-row { + margin: 2.5rem 0; + } + + .smp-section-data { + h3, + h2, + p { + text-align: center; + } + } + + .smp-section-carousel .slick-slider { + .slick-list { + max-width: 90%; + margin: 2rem auto; + + .slick-slide img { + max-height: 18rem; + } + } + + .slick-dots { + position: relative; + left: 0; + right: auto; + top: auto; + transform: none; + width: 100%; + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + + li { + width: auto; + margin: 0; + + p img { + height: 3.5rem; + } + } + } + } + } + } + + @media screen and (max-width: 960px) { + padding-bottom: 0rem; + margin-bottom: 4rem; + .smp-section .smp-section-carousel .slick-slider .slick-list { + .slick-slide { + img { + max-height: 16rem; + } + } + } + } + + @media screen and (max-width: 700px) { + .smp-section { + max-width: 95%; + + .smp-section-carousel .slick-slider { + .slick-list { + max-width: 90%; + margin: 1.5rem auto; + } + .slick-dots { + li p img { + height: 2.5rem; + } + } + } + } + } + + @media screen and (max-width: 500px) { + .smp-section { + max-width: 95%; + + .smp-section-carousel .slick-slider { + .slick-list { + max-width: 90%; + .slick-slide { + img { + max-height: 11rem; + } + } + } + } + } + } + + @media screen and (max-width: 400px) { + .section-header { + h1 { + font-size: 1.75rem; + line-height: 2.25rem; + } + p { + font-size: 1rem; + line-height: 1.5rem; + } + } + + .smp-section { + max-width: 100%; + + .smp-section-carousel .slick-slider { + .slick-list { + max-width: 95%; + .slick-slide img { + max-height: 9rem; + } + } + .slick-dots li p img { + height: 2rem; + } + } + } + } + .mesh-mngmnt { h3 { margin: 1rem 0; @@ -280,22 +351,33 @@ const FeaturesSectionWrapper = styled.section` flex-wrap: wrap; max-width: 75%; - @media screen and (max-width: 992px) { - justify-content: center; - } - .mgmt_button { margin: 0.5rem 0; min-width: 15rem; border-radius: 1rem; + } + } + } + + @media screen and (max-width: 992px) { + .mesh-mngmnt { + .mesh-mngmnt-btn { + justify-content: center; + max-width: 100%; - @media screen and (max-width: 992px) { + .mgmt_button { margin: 0.5rem auto; min-width: 11rem; } } } } + + @media screen and (max-width: 320px) { + .mesh-mngmnt .mesh-mngmnt-btn .mgmt_button { + min-width: 100%; + } + } `; export default FeaturesSectionWrapper; From 650c9ae2e419e832e8a19cd90c42195f11187040 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=99=B0=F0=9D=9A=81=F0=9D=9A=88=F0=9D=99=B0=20?= =?UTF-8?q?=F0=9D=9A=81=F0=9D=99=B2=F0=9D=99=B1?= <248160976+superezzdev@users.noreply.github.com> Date: Thu, 6 Aug 2026 07:50:40 +0000 Subject: [PATCH 6/6] fix(styles): resolve bot comments for overlay triggers, isolation syntax, and theme tokens Signed-off-by: GitHub --- .../Meshery/Features-section/features-section.style.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js index ae3b394935ab51..cd346553fd645f 100644 --- a/src/sections/Meshery/Features-section/features-section.style.js +++ b/src/sections/Meshery/Features-section/features-section.style.js @@ -2,25 +2,23 @@ import styled from "styled-components"; const FeaturesSectionWrapper = styled.section` background-color: black; - transform: skew(0deg, -6deg); padding-bottom: 5rem; margin-bottom: 8rem; overflow: hidden; position: relative; width: 100%; max-width: 100%; - contain: layout style paint; transform-origin: center; z-index: 1; height: auto; - isolate: isolate; + isolation: isolate; .skw { display: grid; position: relative; top: -5rem; } .rect-1-left { - background: #c9fcf6; + background: ${(props) => props.theme.secondaryLightColor || "#c9fcf6"}; border-radius: 0 2.125rem 0 0; grid-column: 1 / span 2; height: 5rem; @@ -43,7 +41,7 @@ const FeaturesSectionWrapper = styled.section` height: 5rem; } .rect-4-right { - background: #c9fcf6; + background: ${(props) => props.theme.secondaryLightColor || "#c9fcf6"}; border-radius: 0 0 0 2.125rem; grid-column: 9/11; grid-row: 2; @@ -53,7 +51,6 @@ const FeaturesSectionWrapper = styled.section` } .section-data { - transform: skew(0deg, 6deg); padding: 0 1rem 3rem; text-align: center; position: relative;