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',
|
||||
} 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) =>
|
||||
|
||||
Reference in New Issue
Block a user