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:
@@ -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) =>
|
||||||
|
|||||||
Reference in New Issue
Block a user