diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx index 669c006..5179887 100644 --- a/src/components/pages/ProvidersStep/ProvidersStep.tsx +++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx @@ -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 = ({ {/* ── Funeral type ── */} - + Funeral type - + {funeralTypeOptions.map((option) => ( = ({ onClick={() => handleFuneralTypeToggle(option.value)} variant="outlined" size="small" - sx={{ flexShrink: 0 }} /> ))} @@ -461,7 +454,7 @@ export const ProvidersStep: React.FC = ({ Price range - +