richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ProvidersStep + VenueStep: heading scrolls, search/filters stay pinned

Browse Source 
- 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>
This commit is contained in:
Richie
2026-03-30 20:18:00 +11:00
parent ac6828d925
commit 3d339b4b0b
2 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/pages/ProvidersStep/ProvidersStep.tsx
View File

@@ -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 <Box
sx={{ sx={{
position: 'sticky', position: 'sticky',
top: 0, top: 0,
zIndex: 1, zIndex: 1,
bgcolor: 'background.default', bgcolor: 'background.default',
pt: 2, pt: 1.5,
pb: 1, pb: 1.5,
mx: { xs: -2, md: -3 }, mx: { xs: -2, md: -3 },
px: { 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 */} {/* Location search */}
<TextField <TextField
placeholder="Search a town or suburb..." placeholder="Search a town or suburb..."

23
src/components/pages/VenueStep/VenueStep.tsx
View File

@@ -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 <Box
sx={{ sx={{
position: 'sticky', position: 'sticky',
top: 0, top: 0,
zIndex: 1, zIndex: 1,
bgcolor: 'background.default', bgcolor: 'background.default',
pt: 2, pt: 1.5,
pb: 1, pb: 1.5,
mx: { xs: -2, md: -3 }, mx: { xs: -2, md: -3 },
px: { 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 */} {/* Location search */}
<TextField <TextField
placeholder="Search a town or suburb..." placeholder="Search a town or suburb..."