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