Bug Report: Horizontal Scrollbar on Mobile Caused by display: grid on .yMHK2
A responsive carousel implementation that previously worked as expected is now causing a horizontal scrollbar on mobile devices, breaking the mobile experience. The issue is caused by a recent CSS change applying `display: grid !important` to the `.yMHK2` class.
It seems the display affects `<ScrollView direction=“inline”>` , and placing a long inline content no longer creates the horizontal scrollbar in the ScrollView itself.
Browser: Chrome/Safari
Device: mac/iPhone
Bellow: yMHK2 class with display grid !important
Bellow: Broken scroll view, creates horizontal scroll in the page
Version:
"@shopify/ui-extensions": "2025.7.1",
"@shopify/ui-extensions-react": "2025.7.1",
Code:
import {
BlockStack,
Button,
Card,
Grid,
Heading,
Image,
Pressable,
ScrollView,
Style,
Text,
useTranslate,
View,
} from '@shopify/ui-extensions-react/customer-account';
import { Children, ReactNode } from 'react';
interface CarouselItemProps {
source: string;
title: string;
subtitle: string;
to: string;
}
/**
* CarouselItem
* A carousel item component that displays an image, title, price, and action button.
*/
const CarouselItem = ({ source, title, subtitle, to }: CarouselItemProps) => {
const t = useTranslate();
return (
<Grid rows={['1fr', 'auto']} minBlockSize="fill" spacing="tight">
<Pressable to={to}>
<BlockStack spacing="tight">
<Image source={source} aspectRatio={1} border="base" borderRadius="large" fit="cover" loading="lazy" />
<BlockStack spacing="none">
<Text emphasis="bold">{title}</Text>
<Text appearance="subdued">{subtitle}</Text>
</BlockStack>
</BlockStack>
</Pressable>
<Button kind="secondary" to={to}>
{t('carousel.action')}
</Button>
</Grid>
);
};
interface CarouselProps {
children: ReactNode;
to: string;
size: 'small' | 'medium';
}
/**
* Carousel
* A carousel component that displays a list of items horizontally.
*/
const GRID_SIZES = {
small: {
default: '40%',
small: '30%',
large: '22.27%',
},
medium: {
default: '40%',
small: '30%',
large: '15%',
},
};
const Carousel = ({ children, size, to }: CarouselProps) => {
const t = useTranslate();
const list = Children.toArray(children);
const gridSize = (viewport: 'default' | 'small' | 'large') => Array(list.length).fill(GRID_SIZES[size][viewport]);
return (
<Card padding={true}>
<BlockStack spacing="loose">
<Grid spacing="base" blockAlignment="center" columns={['fill', 'auto']}>
<Heading level={2}>{t('carousel.title')}</Heading>
<View inlineAlignment="end">
<Button kind="plain" to={to}>
{t('carousel.browse')}
</Button>
</View>
</Grid>
<ScrollView direction="inline" border="none" padding={['none', 'none', 'extraTight', 'none']}>
<Grid
spacing="loose"
columns={Style.default(gridSize('default'))
.when({ viewportInlineSize: { min: 'small' } }, gridSize('small'))
.when({ viewportInlineSize: { min: 'large' } }, gridSize('large'))}
>
{list.map((child, index) => (
<View key={index}>{child}</View>
))}
</Grid>
</ScrollView>
</BlockStack>
</Card>
);
};
export const Page = () => {
return (
<Carousel size="medium" to="#">
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(item => (
<CarouselItem
key={item}
source={`https://via.placeholder.com/150`}
title={`Item ${item}`}
subtitle={`Subtitle ${item}`}
to={`/item/${item}`}
/>
))}
</Carousel>
);
};