From 3d339b4b0b271f4e6063008f75004375c61abaa4 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Mon, 30 Mar 2026 20:18:00 +1100
Subject: [PATCH] ProvidersStep + VenueStep: heading scrolls, search/filters
 stay pinned

- Heading + subheading now scroll with listings (not sticky)
- Search bar + filters + results count remain sticky at top
- Subtle divider border on sticky section for visual segmentation
- Consistent pattern across both list-map pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/ProvidersStep/ProvidersStep.tsx     | 23 +++++++++++--------
 src/components/pages/VenueStep/VenueStep.tsx  | 23 +++++++++++--------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx
index 6fa79ef..678ed13 100644
--- a/src/components/pages/ProvidersStep/ProvidersStep.tsx
+++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx
@@ -139,26 +139,29 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
         )
       }
     >
-      {/* Sticky header — stays pinned while card list scrolls */}
+      {/* Heading — scrolls with listings */}
+      <Typography variant="h4" component="h1" sx={{ mb: 0.5, pt: 2 }} tabIndex={-1}>
+        Find a funeral director
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        {subheading}
+      </Typography>
+
+      {/* Sticky controls — search + filters pinned while listings scroll */}
       <Box
         sx={{
           position: 'sticky',
           top: 0,
           zIndex: 1,
           bgcolor: 'background.default',
-          pt: 2,
-          pb: 1,
+          pt: 1.5,
+          pb: 1.5,
           mx: { xs: -2, md: -3 },
           px: { xs: 2, md: 3 },
+          borderBottom: '1px solid',
+          borderColor: 'divider',
         }}
       >
-        <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
-          Find a funeral director
-        </Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-          {subheading}
-        </Typography>
-
         {/* Location search */}
         <TextField
           placeholder="Search a town or suburb..."
diff --git a/src/components/pages/VenueStep/VenueStep.tsx b/src/components/pages/VenueStep/VenueStep.tsx
index 83bb390..a312161 100644
--- a/src/components/pages/VenueStep/VenueStep.tsx
+++ b/src/components/pages/VenueStep/VenueStep.tsx
@@ -124,26 +124,29 @@ export const VenueStep: React.FC<VenueStepProps> = ({
         )
       }
     >
-      {/* Sticky header — stays pinned while card list scrolls */}
+      {/* Heading — scrolls with listings */}
+      <Typography variant="h4" component="h1" sx={{ mb: 0.5, pt: 2 }} tabIndex={-1}>
+        Where would you like the service?
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        {subheading}
+      </Typography>
+
+      {/* Sticky controls — search + filters pinned while listings scroll */}
       <Box
         sx={{
           position: 'sticky',
           top: 0,
           zIndex: 1,
           bgcolor: 'background.default',
-          pt: 2,
-          pb: 1,
+          pt: 1.5,
+          pb: 1.5,
           mx: { xs: -2, md: -3 },
           px: { xs: 2, md: 3 },
+          borderBottom: '1px solid',
+          borderColor: 'divider',
         }}
       >
-        <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
-          Where would you like the service?
-        </Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-          {subheading}
-        </Typography>
-
         {/* Location search */}
         <TextField
           placeholder="Search a town or suburb..."