Skip to content

Improve responsive styling for integration category chips #7727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shteypandey28-hue wants to merge 4 commits into
base: master
Choose a base branch
from
+205 −126
Open

Improve responsive styling for integration category chips #7727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b62d11c
Improve responsive styling for integration category chips
shteypandey28-hue May 13, 2026
934ccc4
Merge branch 'master' into fix/integration-category-chip-styling
saurabhraghuvanshii May 19, 2026
77e6132
style: refine mobile scrolling and breathing room for category chips
shteypandey28-hue May 20, 2026
3a915a1
Bump sistent v0.21.12 dependencies
Rajesh-Nagarajan-11 May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@rjsf/mui": "^6.5.2",
"@rjsf/utils": "^6.5.2",
"@rjsf/validator-ajv8": "^6.5.2",
"@sistent/sistent": "^0.21.11",
"@sistent/sistent": "^0.21.12",
"@svgr/webpack": "^8.0.1",
"axios": "^1.13.2",
"babel-plugin-styled-components": "^2.1.4",
Expand Down
237 changes: 166 additions & 71 deletions src/sections/Meshery/Meshery-integrations/Integration.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import styled from "styled-components";
import Slider from "react-slick";
Copy link
Copy Markdown

@naman79820 naman79820 May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The refactor looks good overall and the responsiveness/accessibility improvements are nice additions. Replacing the slider with a flex-based layout also simplifies the UI structure.

One small thing: the PR description mentions removing the react-slick dependency, but I can still see react-slick present in package.json. Looks like the usage was removed from this component, but the dependency itself may still need cleanup if it's no longer used elsewhere.

Copy link
Copy Markdown
Contributor Author

@shteypandey28-hue shteypandey28-hue May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the feedback! I've just updated the branch and pushed a couple of responsive mobile UX refinements:

Decreased Cramping: Slightly increased the gap between chips (gap: 0.625rem) and updated padding to give the chips much better breathing room on smaller viewports.

Refined Scroll Insets: Expanded the mobile scroll wrapper to the screen boundaries using negative horizontal margins matching a 1.5rem inner padding. This ensures the first and last chips don't touch the screen edge abruptly, and aligns the horizontal scroll perfectly with the main content container.

Smooth Balanced Fades: Added a z-indexed, gradient left-fade indicator (&::before) matching the right-fade (&::after). Now, as you scroll past the first chip, the content fades beautifully into both screen boundaries, resolving the abrupt clipping feel.

Copy link
Copy Markdown

@naman79820 naman79820 May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the feedback! I've just updated the branch and pushed a couple of responsive mobile UX refinements:

Decreased Cramping: Slightly increased the gap between chips (gap: 0.625rem) and updated padding to give the chips much better breathing room on smaller viewports.

Refined Scroll Insets: Expanded the mobile scroll wrapper to the screen boundaries using negative horizontal margins matching a 1.5rem inner padding. This ensures the first and last chips don't touch the screen edge abruptly, and aligns the horizontal scroll perfectly with the main content container.

Smooth Balanced Fades: Added a z-indexed, gradient left-fade indicator (&::before) matching the right-fade (&::after). Now, as you scroll past the first chip, the content fades beautifully into both screen boundaries, resolving the abrupt clipping feel.

On mobile view, category chips are still getting hidden off-screen right now.
image


export const HoneycombGrid = styled.div`
.heading {
Expand Down Expand Up @@ -33,27 +32,6 @@ export const HoneycombGrid = styled.div`
justify-content: center;
}

.items {
background-color: #d2d8da; //#E7EFF3;
padding: 0.625rem 1.5625rem;
border-radius: 0.625rem;
text-transform: uppercase;
color: #1e2117;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.1s ease-in-out;

&:hover {
opacity: 0.8;
box-shadow: 0px 0px 6px -2px rgb(60, 73, 79);
}
}

.selected {
background-color: ${(props) => props.theme.darkJungleGreenColor};
color: ${(props) => props.theme.whiteToBlack};
}

ul {
margin: 2.5rem 0 0 0;
padding-left: 50px;
Expand Down Expand Up @@ -220,71 +198,188 @@ export const IntegrationCard = styled.div`
// }
`;

export const IntegrationSlider = styled(Slider)`
.slick-prev:hover,
.slick-next:hover {
box-shadow: none;
outline: none;
}
export const CategoryFilterBar = styled.div`
position: relative;
margin: 1.5rem 0 2rem;
padding: 0 0.5rem;

.slick-arrow {
width: 2rem;
height: 3rem;
}
.category-chips-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
padding: 0.25rem 0;

.slick-list {
padding-top: 0.2rem;
@media screen and (max-width: 768px) {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
gap: 0.625rem;
padding: 0.5rem 1.5rem;
margin: 0 -1.5rem;

/* Hide scrollbar but keep functionality */
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
}

.slick-disabled {
/* Left overflow fade indicator for mobile scroll */
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 2.5rem;
pointer-events: none;
opacity: 0.3;
}
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;

.slick-arrow:before {
color: ${(props) => props.theme.whiteToBlack};
font-size: 4rem;
display: inline-block;
height: 1rem;
-webkit-text-size-adjust: none;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
@media screen and (max-width: 768px) {
opacity: 1;
background: linear-gradient(
to left,
transparent,
${(props) =>
props.theme.DarkTheme
? "rgba(18,18,18,0.85)"
: "rgba(255,255,255,0.85)"}
);
}
}

.slick-arrow:hover:before {
color: #00b39f;
}
/* Right overflow fade indicator for mobile scroll */
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 2.5rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;

.slick-slide {
width: auto !important;
margin: 0 0.5rem;
@media screen and (max-width: 768px) {
opacity: 1;
background: linear-gradient(
to right,
transparent,
${(props) =>
props.theme.DarkTheme
? "rgba(18,18,18,0.85)"
: "rgba(255,255,255,0.85)"}
);
}
}

.slick-next {
right: -2.5rem;
}
.category-chip {
/* ── Inactive (default) = dark / filled ── */
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1.125rem;
border-radius: 2rem;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.025em;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
user-select: none;
border: 1.5px solid transparent;
outline: none;
scroll-snap-align: start;

.slick-prev {
left: -2.5rem;
}
background: ${(props) =>
props.theme.DarkTheme
? "rgba(255,255,255,0.08)"
: props.theme.darkJungleGreenColor};
color: ${(props) =>
props.theme.DarkTheme ? "rgba(255,255,255,0.7)" : "#ffffff"};

.slick-prev:before {
content: "‹";
line-height: 0;
opacity: 1;
}
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.15s ease;

.slick-track {
display: flex;
}
&:hover {
background: ${(props) =>
props.theme.DarkTheme ? "rgba(255,255,255,0.14)" : "#2d3328"};
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.slick-next:before {
content: "›";
line-height: 0;
opacity: 1;
&:focus-visible {
border-color: ${(props) => props.theme.keppelColor};
box-shadow: 0 0 0 3px
${(props) =>
props.theme.DarkTheme
? "rgba(0,211,169,0.35)"
: "rgba(0,179,159,0.3)"};
}

&:active {
transform: scale(0.97);
}

/* ── Active / Selected = light / outlined ── */
&.selected {
background: ${(props) =>
props.theme.DarkTheme ? "rgba(0,211,169,0.15)" : "#f0fdfb"};
color: ${(props) =>
props.theme.DarkTheme
? props.theme.keppelColor
: props.theme.secondaryColor};
border-color: ${(props) =>
props.theme.DarkTheme
? props.theme.keppelColor
: props.theme.secondaryColor};
font-weight: 700;

&:hover {
background: ${(props) =>
props.theme.DarkTheme ? "rgba(0,211,169,0.22)" : "#e0f9f5"};
box-shadow: 0 2px 12px
${(props) =>
props.theme.DarkTheme
? "rgba(0,211,169,0.2)"
: "rgba(0,179,159,0.18)"};
}
}

.chip-count {
font-size: 0.6875rem;
font-weight: 500;
opacity: 0.7;
margin-left: 0.125rem;
}

/* Touch-friendly sizing on mobile */
@media screen and (max-width: 768px) {
padding: 0.5rem 1rem;
font-size: 0.75rem;
min-height: 2.25rem;
}
}

.slick-prev,
.slick-next {
top: 1.5rem;
@media (prefers-reduced-motion: reduce) {
.category-chip {
transition: none;
}
.category-chips-wrapper {
scroll-behavior: auto;
}
}
`;
Loading
Loading