Fix chip and slider overflow in filter panel

- Funeral type chips: wrap instead of horizontal scroll (stacks to 2 rows)
- Price slider: px 1 → 2.5 to accommodate MUI thumb radius (10px)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-31 16:20:55 +11:00
parent 477da7d801
commit b2c5fc2cbf

View File

@@ -158,17 +158,11 @@ const sectionHeadingSx = {
color: 'text.primary', color: 'text.primary',
} as const; } as const;
/** Horizontal scrolling chip row — hides scrollbar, no wrap */ /** Wrapping chip row */
const chipScrollSx = { const chipWrapSx = {
display: 'flex', display: 'flex',
flexWrap: 'wrap',
gap: 1, gap: 1,
overflowX: 'auto',
flexWrap: 'nowrap',
mx: -0.5,
px: 0.5,
pb: 0.5,
'&::-webkit-scrollbar': { display: 'none' },
scrollbarWidth: 'none',
} as const; } as const;
// ─── Component ─────────────────────────────────────────────────────────────── // ─── Component ───────────────────────────────────────────────────────────────
@@ -405,11 +399,11 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
<Divider /> <Divider />
{/* ── Funeral type ── */} {/* ── Funeral type ── */}
<Box sx={{ overflow: 'hidden' }}> <Box>
<Typography variant="labelLg" sx={sectionHeadingSx}> <Typography variant="labelLg" sx={sectionHeadingSx}>
Funeral type Funeral type
</Typography> </Typography>
<Box sx={chipScrollSx}> <Box sx={chipWrapSx}>
{funeralTypeOptions.map((option) => ( {funeralTypeOptions.map((option) => (
<Chip <Chip
key={option.value} key={option.value}
@@ -418,7 +412,6 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
onClick={() => handleFuneralTypeToggle(option.value)} onClick={() => handleFuneralTypeToggle(option.value)}
variant="outlined" variant="outlined"
size="small" size="small"
sx={{ flexShrink: 0 }}
/> />
))} ))}
</Box> </Box>
@@ -461,7 +454,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
<Typography variant="labelLg" sx={sectionHeadingSx}> <Typography variant="labelLg" sx={sectionHeadingSx}>
Price range Price range
</Typography> </Typography>
<Box sx={{ px: 1, mb: 1, overflow: 'hidden' }}> <Box sx={{ px: 2.5, mb: 1 }}>
<Slider <Slider
value={filterValues.priceRange} value={filterValues.priceRange}
onChange={(_, newValue) => onChange={(_, newValue) =>