Merge pull request #2813 from hackforla/widen-address-bar-2596

Widen address bar #2596

Author: whitneywind

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

@@ -5,7 +5,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;
@@ -17,7 +16,6 @@ const ResultsFilters: FC<ResultsFiltersProps> = ({
   toggleShowList,
 }) => {
   const { taglineText } = TENANT_CONFIG;
-  const { isMobile } = useBreakpoints();
 
   return (
     <Grid2
@@ -31,7 +29,7 @@ const ResultsFilters: FC<ResultsFiltersProps> = ({
     >
       <Grid2
         display={{ xs: "none", sm: "block" }}
-        sm={4}
+        sm="auto"
         sx={{
           paddingLeft: "1rem",
         }}
@@ -52,45 +50,37 @@ const ResultsFilters: FC<ResultsFiltersProps> = ({
       <Grid2
         container
         xs={12}
-        sm={8}
+        sm={true}
         justifyContent="center"
         alignItems="center"
-        wrap="wrap-reverse"
       >
         <Stack
-          direction={{ xs: "column-reverse", sm: "row" }}
+          direction={{ xs: "column-reverse", sm: "row", }}
           spacing={0.5}
           sx={{
             width: "100%",
             alignItems: "center",
           }}
         >
-          <Grid2 xs={12} sm={6}>
             <Stack
               direction="row"
               alignItems="center"
               sx={{
-                marginX: "1rem",
-                maxWidth: "99vw",
                 gap: "0.5rem",
+                px: "1rem",
+                boxSizing: "border-box",
+                width: "100%",
               }}
             >
-              <AddressDropDown autoFocus={false} />
-              {isMobile && <Geolocate />}
-              <Box
-                sx={{
-                  maxWidth: "48px",
-                  boxSizing: "border-box",
-                }}
-                display={{ xs: "block", sm: "none" }}
-              >
-                <SwitchViewsButton
-                  isListView={showList}
-                  onClick={toggleShowList}
-                />
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <AddressDropDown autoFocus={false} />
+              </Box>
+
+              <Box display={{ xs: "flex", sm: "none" }} alignItems="center" gap="0.5rem">
+                <Geolocate />
+                <SwitchViewsButton isListView={showList} onClick={toggleShowList} />
               </Box>
             </Stack>
-          </Grid2>
         </Stack>
       </Grid2>
     </Grid2>

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 && (
         <Grid
           container={isMobile}
           wrap={isMobile ? "nowrap" : undefined}

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,
@@ -29,7 +28,6 @@ interface MobileLayoutProps {
 const MobileLayout: FC<MobileLayoutProps> = ({ filters, map, list, showList }) => {
   const filterPanelOpen = useFilterPanel();
   const initialY = showList ? 5 : 57;
-  const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
   const dispatch = useAppDispatch();
   const [position, setPosition] = useState({
     x: 0,
@@ -49,17 +47,15 @@ const MobileLayout: FC<MobileLayoutProps> = ({ filters, map, list, showList }) =
     }
 
     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;