diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx index c1c907e..64b5f24 100644 --- a/src/components/pages/ProvidersStep/ProvidersStep.tsx +++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx @@ -146,50 +146,62 @@ export const ProvidersStep: React.FC = ({ ) } > - {/* Header */} - - Choose a funeral provider - - - {subheading} - - - {/* Search bar */} - - - - - {/* Filter chips */} - {filters && filters.length > 0 && ( - - {filters.map((filter, index) => ( - onFilterToggle(index) : undefined} - variant="outlined" - size="small" - /> - ))} - - )} - - {/* Results count */} - - {providers.length} provider{providers.length !== 1 ? 's' : ''} found - + + Choose a funeral provider + + + {subheading} + + + {/* Search bar */} + + + + + {/* Filter chips */} + {filters && filters.length > 0 && ( + + {filters.map((filter, index) => ( + onFilterToggle(index) : undefined} + variant="outlined" + size="small" + /> + ))} + + )} + + {/* Results count */} + + {providers.length} provider{providers.length !== 1 ? 's' : ''} found + + {/* Error message */} {error && ( diff --git a/src/components/pages/VenueStep/VenueStep.tsx b/src/components/pages/VenueStep/VenueStep.tsx index d833ecf..2a3b6ff 100644 --- a/src/components/pages/VenueStep/VenueStep.tsx +++ b/src/components/pages/VenueStep/VenueStep.tsx @@ -193,17 +193,6 @@ export const VenueStep: React.FC = ({ ) } > - {/* Page heading */} - - Where would you like the service? - - - - {isPrePlanning - ? 'Browse available venues. Your choice can be changed later.' - : 'Choose a venue for the funeral service. You can filter by location, features, and religion.'} - - = ({ if (!loading) onContinue(); }} > - {/* ─── Search + Filters ─── */} - - onChange({ ...values, search: e.target.value })} - fullWidth - InputProps={{ - startAdornment: ( - - - - ), - }} - sx={{ mb: 2 }} - /> + {/* Sticky header — stays pinned while card list scrolls */} + + + Where would you like the service? + - - {filterOptions.map((filter) => ( - handleFilterToggle(filter.key)} - selected={values.activeFilters.includes(filter.key)} - /> - ))} + + {isPrePlanning + ? 'Browse available venues. Your choice can be changed later.' + : 'Choose a venue for the funeral service. You can filter by location, features, and religion.'} + + + {/* ─── Search + Filters ─── */} + + onChange({ ...values, search: e.target.value })} + fullWidth + InputProps={{ + startAdornment: ( + + + + ), + }} + sx={{ mb: 2 }} + /> + + + {filterOptions.map((filter) => ( + handleFilterToggle(filter.key)} + selected={values.activeFilters.includes(filter.key)} + /> + ))} + - - {/* ─── Results count ─── */} - - Found {venues.length} venue{venues.length !== 1 ? 's' : ''} - {locationName ? ` near ${locationName}` : ''} - + {/* ─── Results count ─── */} + + Found {venues.length} venue{venues.length !== 1 ? 's' : ''} + {locationName ? ` near ${locationName}` : ''} + + {/* ─── Venue card grid ─── */} = ({ children ); -/** List + Map: ~40% scrollable list (left) / ~60% map (right) */ +/** List + Map: 420px fixed scrollable list (left) / flex map (right) — D-B */ const ListMapLayout: React.FC<{ children: React.ReactNode; secondaryPanel?: React.ReactNode; -}> = ({ children, secondaryPanel }) => ( + backLink?: React.ReactNode; +}> = ({ children, secondaryPanel, backLink }) => ( + {backLink} {children} @@ -246,7 +249,11 @@ const DetailTogglesLayout: React.FC<{ const LAYOUT_MAP: Record< WizardLayoutVariant, - React.FC<{ children: React.ReactNode; secondaryPanel?: React.ReactNode }> + React.FC<{ + children: React.ReactNode; + secondaryPanel?: React.ReactNode; + backLink?: React.ReactNode; + }> > = { 'centered-form': CenteredFormLayout, 'list-map': ListMapLayout, @@ -313,8 +320,8 @@ export const WizardLayout = React.forwardRef( {/* Stepper + running total bar (grid-sidebar, detail-toggles only) */} {showStepper && } - {/* Back link — inside a container for consistent alignment */} - {showBackLink && ( + {/* Back link — inside left panel for list-map, above content for others */} + {showBackLink && variant !== 'list-map' && ( ( {/* Main content area */} - {children} + + ) : undefined + } + > + {children} + {/* Sticky help bar */}