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 5 commits into
base: master
Choose a base branch
from
Open

Improve responsive styling for integration category chips #7727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b7db9a6
Improve responsive styling for integration category chips
shteypandey28-hue May 13, 2026
adb1b69
style: refine mobile scrolling and breathing room for category chips
shteypandey28-hue May 20, 2026
74abc31
Merge branch 'master' into fix/integration-category-chip-styling
saurabhraghuvanshii Jun 9, 2026
17be3a8
Trigger fresh preview
shteypandey28-hue Jul 2, 2026
4dff03f
Merge branch 'master' into fix/integration-category-chip-styling
Rajesh-Nagarajan-11 Jul 2, 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
25 changes: 25 additions & 0 deletions layer5.code-workspace
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"folders": [
{
"path": "."
},
{
"path": "."
},
{
"path": "."
},
{
"path": "."
},
{
"path": "."
},
{
"path": "."
},
{
"path": "."
}
]
}
6 changes: 3 additions & 3 deletions onRenderBody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const themes = { light: lighttheme, dark: darktheme };
const MagicScriptTag = (props) => {
// FIX: Stringify the theme object outside the template literal to prevent syntax errors caused by unescaped quotes inside theme values.
const themeJSON = JSON.stringify(props.theme);

// Injects CSS variables and theme state strictly before the first paint to prevent FOUC.
const codeToRunOnClient = `
(function() {
Expand Down Expand Up @@ -75,6 +75,6 @@ const MagicScriptTag = (props) => {

// FIX: Using setHeadComponents instead of setPreBodyComponents ensures the script runs
// strictly in the <head>, blocking the first paint until the theme is applied and completely eliminating FOUC.
export const onRenderBody = ( { setHeadComponents }) => {
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([<MagicScriptTag key="theme-injection" theme={themes} />]);
};
};
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";

@naman79820 naman79820 May 19, 2026

Copy link
Copy Markdown

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.

@shteypandey28-hue shteypandey28-hue May 20, 2026

Copy link
Copy Markdown
Contributor Author

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.

@naman79820 naman79820 May 20, 2026

Copy link
Copy Markdown

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