Merge origin/develop into migrate-MUI

Resolve conflicts in ResultsFilters and ResultsMap by combining the
widen-address-bar layout from develop with MUI v7 Grid/Box migrations.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: junjun107

client/src/components/FoodSeeker/AddressDropDown.tsx

@@ -298,7 +298,7 @@ export default function AddressDropDown({ autoFocus }: AddressDropDownProps) {
           return options;
         }}
         sx={{
-          width: 600,
+          width: "100%",
           backgroundColor: "#F0F0F0",
           "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
             borderColor: "white",

client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.tsx

@@ -4,7 +4,6 @@ import AddressDropDown from "components/FoodSeeker/AddressDropDown";
 import SwitchViewsButton from "./SwitchViewsButton";
 import { TENANT_CONFIG } from "../../../../helpers/Constants";
 import Geolocate from "./Geolocate";
-import useBreakpoints from "hooks/useBreakpoints";
 
 interface ResultsFiltersProps {
   showList: boolean;
@@ -16,7 +15,6 @@ const ResultsFilters: FC<ResultsFiltersProps> = ({
   toggleShowList,
 }) => {
   const { taglineText } = TENANT_CONFIG;
-  const { isMobile } = useBreakpoints();
 
   return (
     <Grid
@@ -30,7 +28,7 @@ const ResultsFilters: FC<ResultsFiltersProps> = ({
     >
       <Grid
         display={{ xs: "none", sm: "block" }}
-        size={{ sm: 4 }}
+        size={{ sm: "auto" }}
         sx={{
           paddingLeft: "1rem",
         }}
@@ -50,10 +48,9 @@ const ResultsFilters: FC<ResultsFiltersProps> = ({
 
       <Grid
         container
-        size={{ xs: 12, sm: 8 }}
+        size={{ xs: 12, sm: "grow" }}
         justifyContent="center"
         alignItems="center"
-        wrap="wrap-reverse"
       >
         <Stack
           direction={{ xs: "column-reverse", sm: "row" }}
@@ -63,32 +60,32 @@ const ResultsFilters: FC<ResultsFiltersProps> = ({
             alignItems: "center",
           }}
         >
-          <Grid size={{ xs: 12, sm: 6 }}>
-            <Stack
-              direction="row"
+          <Stack
+            direction="row"
+            alignItems="center"
+            sx={{
+              gap: "0.5rem",
+              px: "1rem",
+              boxSizing: "border-box",
+              width: "100%",
+            }}
+          >
+            <Box sx={{ flex: 1, minWidth: 0 }}>
+              <AddressDropDown autoFocus={false} />
+            </Box>
+
+            <Box
+              display={{ xs: "flex", sm: "none" }}
               alignItems="center"
-              sx={{
-                marginX: "1rem",
-                maxWidth: "99vw",
-                gap: "0.5rem",
-              }}
+              gap="0.5rem"
             >
-              <AddressDropDown autoFocus={false} />
-              {isMobile && <Geolocate />}
-              <Box
-                sx={{
-                  maxWidth: "48px",
-                  boxSizing: "border-box",
-                }}
-                display={{ xs: "block", sm: "none" }}
-              >
-                <SwitchViewsButton
-                  isListView={showList}
-                  onClick={toggleShowList}
-                />
-              </Box>
-            </Stack>
-          </Grid>
+              <Geolocate />
+              <SwitchViewsButton
+                isListView={showList}
+                onClick={toggleShowList}
+              />
+            </Box>
+          </Stack>
         </Stack>
       </Grid>
     </Grid>

client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.tsx

@@ -15,7 +15,6 @@ import RemoveIcon from "@mui/icons-material/RemoveRounded";
 import { MAPBOX_STYLE } from "constants/map";
 import { MAPBOX_ACCESS_TOKEN, DEFAULT_VIEWPORT } from "helpers/Constants";
 import useBreakpoints from "hooks/useBreakpoints";
-import useFeatureFlag from "hooks/useFeatureFlag";
 import "mapbox-gl/dist/mapbox-gl.css";
 import Map, { Layer, Marker, Source } from "react-map-gl";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -110,7 +109,6 @@ const ResultsMap = ({
   const neighborhood = useNeighborhood() as { geojson?: any } | null;
   const regionGeoJSON = neighborhood?.geojson;
   const startIconCoordinates = searchCoordinates || userCoordinates;
-  const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
 
   const onMouseEnter = useCallback(() => setCursor("pointer"), []);
   const onMouseLeave = useCallback(() => setCursor("auto"), []);
@@ -461,7 +459,8 @@ const ResultsMap = ({
           </Source>
         )}
       </Map>
-      {!loading && hasAdvancedFilterFeatureFlag && (
+
+      {!loading && (
         <Box
           position="absolute"
           display="inline-flex"

client/src/components/FoodSeeker/SearchResults/SearchResults.tsx

@@ -116,20 +116,6 @@ const SearchResults = () => {
     }
   }, [positionDraggable]);
 
-  // USE EFFECT BASED ON THIS FUNCTION IN Mobile.js
-  // const handleStop = (e, ui) => {
-  //   const windowHeight = window.innerHeight / 100;
-  //   let newY;
-  //   if (ui.y < 20 * windowHeight) {
-  //     newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 0;
-  //   } else if (ui.y > 20 * windowHeight && ui.y < 40 * windowHeight) {
-  //     newY = 17;
-  //   } else if (ui.y > 40 * windowHeight) {
-  //     newY = 54;
-  //   }
-  //   setPosition({ x: 0, y: newY * windowHeight });
-  // };
-
   // If path starts with "widget", then set the state variable isWidget to true,
   // so we stay in widget mode (w/o normal App Header and Footer)
   useEffect(() => {

client/src/components/FoodSeeker/SearchResults/layouts/Mobile.tsx

@@ -4,7 +4,6 @@ import Draggable, { DraggableEvent, DraggableData } from "react-draggable";
 import { useFilterPanel } from "appReducer";
 import AttributionInfo from "../AttributionInfo";
 import { useAppDispatch } from "../../../../appReducer";
-import useFeatureFlag from "hooks/useFeatureFlag";
 
 const getOverlayStyle = (positionY: number) => ({
   position: "absolute" as const,
@@ -34,7 +33,6 @@ const MobileLayout: FC<MobileLayoutProps> = ({
 }) => {
   const filterPanelOpen = useFilterPanel();
   const initialY = showList ? 5 : 57;
-  const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
   const dispatch = useAppDispatch();
   const nodeRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState({
@@ -55,17 +53,15 @@ const MobileLayout: FC<MobileLayoutProps> = ({
     }
 
     setPosition({ x: 0, y: newY * (window.innerHeight / 100) });
-  }, [showList, filterPanelOpen, hasAdvancedFilterFeatureFlag]);
+  }, [showList, filterPanelOpen]);
 
   const handleDrag = (e: DraggableEvent, ui: DraggableData) => {
     setPosition({ x: 0, y: ui.y });
   };
 
   const handleStop = (e: DraggableEvent, ui: DraggableData) => {
     const windowHeight = window.innerHeight / 100;
-    const minY = hasAdvancedFilterFeatureFlag
-      ? (100 / window.innerHeight) * 60
-      : 0;
+    const minY = (100 / window.innerHeight) * 60;
     const maxY = 80;
     const snapPoints = [minY, 35, maxY];
     const snapThreshold = 5;