From b2c5fc2cbfd017dae1b3ed3623b34a9c105ff370 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Tue, 31 Mar 2026 16:20:55 +1100
Subject: [PATCH] Fix chip and slider overflow in filter panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../pages/ProvidersStep/ProvidersStep.tsx     | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

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<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) =>