From 1c3cdbc10142670aecf347a716daec191bb918a7 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Sun, 29 Mar 2026 22:18:52 +1100
Subject: [PATCH] =?UTF-8?q?Batch=202:=20List-map=20layout=20rework=20?=
 =?UTF-8?q?=E2=80=94=20420px=20fixed=20column,=20sticky=20headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- WizardLayout ListMapLayout: 420px fixed left column (D-B), flex:1
  right panel, back link rendered inside left panel instead of above
  the split (eliminates gap above map)
- LAYOUT_MAP type updated to accept backLink prop for list-map variant
- ProvidersStep: heading + search + filters wrapped in sticky Box
  that pins at top of scrollable left panel while card list scrolls
- VenueStep: same sticky header treatment, heading moved inside form
  for consistent wrapper structure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/ProvidersStep/ProvidersStep.tsx     | 98 +++++++++++--------
 src/components/pages/VenueStep/VenueStep.tsx  | 96 ++++++++++--------
 .../templates/WizardLayout/WizardLayout.tsx   | 34 +++++--
 3 files changed, 134 insertions(+), 94 deletions(-)

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<ProvidersStepProps> = ({
         )
       }
     >
-      {/* Header */}
-      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
-        Choose a funeral provider
-      </Typography>
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-        {subheading}
-      </Typography>
-
-      {/* Search bar */}
-      <Box sx={{ mb: 2 }}>
-        <SearchBar
-          value={searchQuery}
-          onChange={onSearchChange}
-          onSearch={onSearch}
-          placeholder="Search providers..."
-          size="small"
-        />
-      </Box>
-
-      {/* Filter chips */}
-      {filters && filters.length > 0 && (
-        <Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap' }}>
-          {filters.map((filter, index) => (
-            <Chip
-              key={filter.label}
-              label={filter.label}
-              selected={filter.active}
-              onClick={onFilterToggle ? () => onFilterToggle(index) : undefined}
-              variant="outlined"
-              size="small"
-            />
-          ))}
-        </Box>
-      )}
-
-      {/* Results count */}
-      <Typography
-        variant="caption"
-        color="text.secondary"
-        sx={{ mb: 2, display: 'block' }}
-        aria-live="polite"
+      {/* Sticky header — stays pinned while card list scrolls */}
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          bgcolor: 'background.default',
+          pb: 1,
+          mx: -3,
+          px: 3,
+        }}
       >
-        {providers.length} provider{providers.length !== 1 ? 's' : ''} found
-      </Typography>
+        <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+          Choose a funeral provider
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+          {subheading}
+        </Typography>
+
+        {/* Search bar */}
+        <Box sx={{ mb: 2 }}>
+          <SearchBar
+            value={searchQuery}
+            onChange={onSearchChange}
+            onSearch={onSearch}
+            placeholder="Search providers..."
+            size="small"
+          />
+        </Box>
+
+        {/* Filter chips */}
+        {filters && filters.length > 0 && (
+          <Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap' }}>
+            {filters.map((filter, index) => (
+              <Chip
+                key={filter.label}
+                label={filter.label}
+                selected={filter.active}
+                onClick={onFilterToggle ? () => onFilterToggle(index) : undefined}
+                variant="outlined"
+                size="small"
+              />
+            ))}
+          </Box>
+        )}
+
+        {/* Results count */}
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{ mb: 0, display: 'block' }}
+          aria-live="polite"
+        >
+          {providers.length} provider{providers.length !== 1 ? 's' : ''} found
+        </Typography>
+      </Box>
 
       {/* 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<VenueStepProps> = ({
         )
       }
     >
-      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
-        Where would you like the service?
-      </Typography>
-
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-        {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.'}
-      </Typography>
-
       <Box
         component="form"
         noValidate
@@ -213,40 +202,63 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           if (!loading) onContinue();
         }}
       >
-        {/* ─── Search + Filters ─── */}
-        <Box sx={{ mb: 3 }}>
-          <TextField
-            placeholder="Search a town or suburb..."
-            value={values.search}
-            onChange={(e) => onChange({ ...values, search: e.target.value })}
-            fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon sx={{ color: 'text.secondary' }} />
-                </InputAdornment>
-              ),
-            }}
-            sx={{ mb: 2 }}
-          />
+        {/* Sticky header — stays pinned while card list scrolls */}
+        <Box
+          sx={{
+            position: 'sticky',
+            top: 0,
+            zIndex: 1,
+            bgcolor: 'background.default',
+            pb: 1,
+            mx: -3,
+            px: 3,
+          }}
+        >
+          <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+            Where would you like the service?
+          </Typography>
 
-          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-            {filterOptions.map((filter) => (
-              <Chip
-                key={filter.key}
-                label={filter.label}
-                onClick={() => handleFilterToggle(filter.key)}
-                selected={values.activeFilters.includes(filter.key)}
-              />
-            ))}
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+            {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.'}
+          </Typography>
+
+          {/* ─── Search + Filters ─── */}
+          <Box sx={{ mb: 2 }}>
+            <TextField
+              placeholder="Search a town or suburb..."
+              value={values.search}
+              onChange={(e) => onChange({ ...values, search: e.target.value })}
+              fullWidth
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon sx={{ color: 'text.secondary' }} />
+                  </InputAdornment>
+                ),
+              }}
+              sx={{ mb: 2 }}
+            />
+
+            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+              {filterOptions.map((filter) => (
+                <Chip
+                  key={filter.key}
+                  label={filter.label}
+                  onClick={() => handleFilterToggle(filter.key)}
+                  selected={values.activeFilters.includes(filter.key)}
+                />
+              ))}
+            </Box>
           </Box>
-        </Box>
 
-        {/* ─── Results count ─── */}
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }} aria-live="polite">
-          Found {venues.length} venue{venues.length !== 1 ? 's' : ''}
-          {locationName ? ` near ${locationName}` : ''}
-        </Typography>
+          {/* ─── Results count ─── */}
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 0 }} aria-live="polite">
+            Found {venues.length} venue{venues.length !== 1 ? 's' : ''}
+            {locationName ? ` near ${locationName}` : ''}
+          </Typography>
+        </Box>
 
         {/* ─── Venue card grid ─── */}
         <Box
diff --git a/src/components/templates/WizardLayout/WizardLayout.tsx b/src/components/templates/WizardLayout/WizardLayout.tsx
index 5bce519..3a28bde 100644
--- a/src/components/templates/WizardLayout/WizardLayout.tsx
+++ b/src/components/templates/WizardLayout/WizardLayout.tsx
@@ -142,11 +142,12 @@ const CenteredFormLayout: React.FC<{ children: React.ReactNode }> = ({ children
   </Container>
 );
 
-/** 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 }) => (
   <Box
     sx={{
       display: 'flex',
@@ -156,18 +157,20 @@ const ListMapLayout: React.FC<{
   >
     <Box
       sx={{
-        width: { xs: '100%', md: '40%' },
+        width: { xs: '100%', md: 420 },
+        flexShrink: 0,
         overflowY: 'auto',
         px: { xs: 2, md: 3 },
         py: 3,
       }}
     >
+      {backLink}
       {children}
     </Box>
     <Box
       sx={{
-        display: { xs: 'none', md: 'block' },
-        width: '60%',
+        display: { xs: 'none', md: 'flex' },
+        flex: 1,
         position: 'relative',
       }}
     >
@@ -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<HTMLDivElement, WizardLayoutProps>(
         {/* Stepper + running total bar (grid-sidebar, detail-toggles only) */}
         {showStepper && <StepperBar stepper={progressStepper} total={runningTotal} />}
 
-        {/* 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' && (
           <Container
             maxWidth={variant === 'centered-form' ? 'sm' : 'lg'}
             sx={{ pt: 2, px: { xs: 4, md: 3 } }}
@@ -325,7 +332,16 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
 
         {/* Main content area */}
         <Box component="main" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
-          <LayoutComponent secondaryPanel={secondaryPanel}>{children}</LayoutComponent>
+          <LayoutComponent
+            secondaryPanel={secondaryPanel}
+            backLink={
+              showBackLink && variant === 'list-map' ? (
+                <BackLink label={backLabel} onClick={onBack} />
+              ) : undefined
+            }
+          >
+            {children}
+          </LayoutComponent>
         </Box>
 
         {/* Sticky help bar */}