Move List/Map toggle to floating overlay on map panel

- View toggle: floating in top-left of map panel with shadow + paper bg
- Control bar: just Filters + Sort (consistent heights, no overflow)
- Results count: bumped mt from 1 to 2 for more breathing room
- Both ProvidersStep and VenueStep updated

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/pages/ProvidersStep/ProvidersStep.tsx

@@ -305,14 +305,59 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
       onBack={onBack}
       sx={sx}
       secondaryPanel={
-        mapPanel || (
+        <Box sx={{ position: 'relative', flex: 1, display: 'flex' }}>
+          {/* Floating view toggle */}
+          <ToggleButtonGroup
+            value={viewMode}
+            exclusive
+            onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
+            size="small"
+            aria-label="View mode"
+            sx={{
+              position: 'absolute',
+              top: 12,
+              left: 12,
+              zIndex: 1,
+              bgcolor: 'background.paper',
+              boxShadow: 'var(--fa-shadow-md)',
+              borderRadius: 1,
+              '& .MuiToggleButton-root': {
+                px: 1.5,
+                py: 0.5,
+                fontSize: '0.75rem',
+                fontWeight: 500,
+                gap: 0.5,
+                border: '1px solid',
+                borderColor: 'divider',
+                textTransform: 'none',
+                '&.Mui-selected': {
+                  bgcolor: 'var(--fa-color-brand-100)',
+                  color: 'primary.main',
+                  borderColor: 'primary.main',
+                  '&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
+                },
+              },
+            }}
+          >
+            <ToggleButton value="list" aria-label="List view">
+              <ViewListOutlinedIcon sx={{ fontSize: 16 }} />
+              List
+            </ToggleButton>
+            <ToggleButton value="map" aria-label="Map view">
+              <MapOutlinedIcon sx={{ fontSize: 16 }} />
+              Map
+            </ToggleButton>
+          </ToggleButtonGroup>
+
+          {/* Map content */}
+          {mapPanel || (
             <Box
               sx={{
-              bgcolor: 'var(--fa-color-surface-cool)',
                 flex: 1,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                bgcolor: 'var(--fa-color-surface-cool)',
                 borderLeft: '1px solid',
                 borderColor: 'divider',
               }}
@@ -321,7 +366,8 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                 Map coming soon
               </Typography>
             </Box>
-        )
+          )}
+        </Box>
       }
     >
       {/* Heading — scrolls with listings */}
@@ -371,7 +417,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           sx={{ mb: 1.5 }}
         />
 
-        {/* Control bar — view toggle, filters, sort on one line */}
+        {/* Control bar — filters + sort */}
         <Box
           sx={{
             display: 'flex',
@@ -379,42 +425,6 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
             gap: 1,
           }}
         >
-          {/* View toggle */}
-          <ToggleButtonGroup
-            value={viewMode}
-            exclusive
-            onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
-            size="small"
-            aria-label="View mode"
-            sx={{
-              '& .MuiToggleButton-root': {
-                px: 1.5,
-                py: 0.5,
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                gap: 0.5,
-                border: '1px solid',
-                borderColor: 'divider',
-                textTransform: 'none',
-                '&.Mui-selected': {
-                  bgcolor: 'var(--fa-color-brand-100)',
-                  color: 'primary.main',
-                  borderColor: 'primary.main',
-                  '&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
-                },
-              },
-            }}
-          >
-            <ToggleButton value="list" aria-label="List view">
-              <ViewListOutlinedIcon sx={{ fontSize: 16 }} />
-              List
-            </ToggleButton>
-            <ToggleButton value="map" aria-label="Map view">
-              <MapOutlinedIcon sx={{ fontSize: 16 }} />
-              Map
-            </ToggleButton>
-          </ToggleButtonGroup>
-
           {/* Filters */}
           <FilterPanel activeCount={activeCount} onClear={handleClear}>
             {/* ── Location ── */}
@@ -631,7 +641,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
         <Typography
           variant="caption"
           color="text.secondary"
-          sx={{ mt: 1, display: 'block' }}
+          sx={{ mt: 2, display: 'block' }}
           aria-live="polite"
         >
           {providers.length} provider{providers.length !== 1 ? 's' : ''} found

src/components/pages/VenueStep/VenueStep.tsx

@@ -249,14 +249,59 @@ export const VenueStep: React.FC<VenueStepProps> = ({
       onBack={onBack}
       sx={sx}
       secondaryPanel={
-        mapPanel || (
+        <Box sx={{ position: 'relative', flex: 1, display: 'flex' }}>
+          {/* Floating view toggle */}
+          <ToggleButtonGroup
+            value={viewMode}
+            exclusive
+            onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
+            size="small"
+            aria-label="View mode"
+            sx={{
+              position: 'absolute',
+              top: 12,
+              left: 12,
+              zIndex: 1,
+              bgcolor: 'background.paper',
+              boxShadow: 'var(--fa-shadow-md)',
+              borderRadius: 1,
+              '& .MuiToggleButton-root': {
+                px: 1.5,
+                py: 0.5,
+                fontSize: '0.75rem',
+                fontWeight: 500,
+                gap: 0.5,
+                border: '1px solid',
+                borderColor: 'divider',
+                textTransform: 'none',
+                '&.Mui-selected': {
+                  bgcolor: 'var(--fa-color-brand-100)',
+                  color: 'primary.main',
+                  borderColor: 'primary.main',
+                  '&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
+                },
+              },
+            }}
+          >
+            <ToggleButton value="list" aria-label="List view">
+              <ViewListOutlinedIcon sx={{ fontSize: 16 }} />
+              List
+            </ToggleButton>
+            <ToggleButton value="map" aria-label="Map view">
+              <MapOutlinedIcon sx={{ fontSize: 16 }} />
+              Map
+            </ToggleButton>
+          </ToggleButtonGroup>
+
+          {/* Map content */}
+          {mapPanel || (
             <Box
               sx={{
-              bgcolor: 'var(--fa-color-surface-cool)',
                 flex: 1,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                bgcolor: 'var(--fa-color-surface-cool)',
                 borderLeft: '1px solid',
                 borderColor: 'divider',
               }}
@@ -265,7 +310,8 @@ export const VenueStep: React.FC<VenueStepProps> = ({
                 Map coming soon
               </Typography>
             </Box>
-        )
+          )}
+        </Box>
       }
     >
       {/* Heading — scrolls with listings */}
@@ -315,7 +361,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           sx={{ mb: 1.5 }}
         />
 
-        {/* Control bar — view toggle, filters, sort on one line */}
+        {/* Control bar — filters + sort */}
         <Box
           sx={{
             display: 'flex',
@@ -323,42 +369,6 @@ export const VenueStep: React.FC<VenueStepProps> = ({
             gap: 1,
           }}
         >
-          {/* View toggle */}
-          <ToggleButtonGroup
-            value={viewMode}
-            exclusive
-            onChange={(_, val) => val && onViewModeChange?.(val as ListViewMode)}
-            size="small"
-            aria-label="View mode"
-            sx={{
-              '& .MuiToggleButton-root': {
-                px: 1.5,
-                py: 0.5,
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                gap: 0.5,
-                border: '1px solid',
-                borderColor: 'divider',
-                textTransform: 'none',
-                '&.Mui-selected': {
-                  bgcolor: 'var(--fa-color-brand-100)',
-                  color: 'primary.main',
-                  borderColor: 'primary.main',
-                  '&:hover': { bgcolor: 'var(--fa-color-brand-200)' },
-                },
-              },
-            }}
-          >
-            <ToggleButton value="list" aria-label="List view">
-              <ViewListOutlinedIcon sx={{ fontSize: 16 }} />
-              List
-            </ToggleButton>
-            <ToggleButton value="map" aria-label="Map view">
-              <MapOutlinedIcon sx={{ fontSize: 16 }} />
-              Map
-            </ToggleButton>
-          </ToggleButtonGroup>
-
           {/* Filters */}
           <FilterPanel activeCount={activeCount} onClear={handleClear}>
             {/* ── Location ── */}
@@ -514,7 +524,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
         <Typography
           variant="caption"
           color="text.secondary"
-          sx={{ mt: 1, display: 'block' }}
+          sx={{ mt: 2, display: 'block' }}
           aria-live="polite"
         >
           {venues.length} venue{venues.length !== 1 ? 's' : ''}