From d91ad13af875f6ebf48a644f252c32031af9d25e Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Wed, 22 Apr 2026 21:43:39 +1000
Subject: [PATCH] ProvidersStep mobile: white search fill + Sort by text
 trigger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Mobile-map search input gets an explicit white fill so it reads
  cleanly against map tiles (desktop unchanged)
- Sort trigger on mobile-map is now a compact "Sort by" outlined
  Button instead of a lone icon — clearer affordance than the swap
  glyph, still tight on horizontal space

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../pages/ProvidersStep/ProvidersStep.tsx     | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx
index 14d1adb..3cd130e 100644
--- a/src/components/pages/ProvidersStep/ProvidersStep.tsx
+++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx
@@ -621,6 +621,9 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                 />
               )}
               sx={{
+                '& .MuiOutlinedInput-root': {
+                  bgcolor: 'background.paper',
+                },
                 '& .MuiOutlinedInput-root.Mui-focused': {
                   boxShadow: 'none',
                   '& .MuiOutlinedInput-notchedOutline': {
@@ -651,26 +654,25 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                 {filterDialogChildren}
               </FilterPanel>
 
-              {/* Sort — icon-only on mobile (expansion of the current sort
-                  surfaced through the menu + aria-label) */}
-              <IconButton
+              {/* Sort — compact text trigger on mobile. Current value lives
+                  in the menu (selected state); aria-label spells it out. */}
+              <Button
+                variant="outlined"
+                color="secondary"
+                size="small"
                 onClick={(e) => setSortAnchor(e.currentTarget)}
                 aria-haspopup="listbox"
                 aria-label={`Sort by ${SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'}`}
                 sx={{
-                  width: 32,
                   height: 32,
-                  borderRadius: 1,
-                  border: '1px solid',
-                  borderColor: 'divider',
                   bgcolor: 'background.paper',
-                  color: 'text.secondary',
+                  textTransform: 'none',
                   '&:hover': { bgcolor: 'background.paper' },
                   '&:focus-visible': { outline: 'none' },
                 }}
               >
-                <SwapVertIcon sx={{ fontSize: 18 }} />
-              </IconButton>
+                Sort by
+              </Button>
               <Menu
                 anchorEl={sortAnchor}
                 open={Boolean(sortAnchor)}