From a4f1c1130824e7744fff4145141cfa43111596bb Mon Sep 17 00:00:00 2001
From: Scout Knight-Pheng <sknightp@calpoly.edu>
Date: Wed, 25 Feb 2026 19:52:18 -0800
Subject: [PATCH 1/2] fix: control buttons render to the correct places

---
 .../components/features/map/MapFilters.tsx    |   6 +-
 .../src/components/map/MapContainer.tsx       | 111 ++++++++++++------
 2 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/frontend/calpoly-map/src/components/features/map/MapFilters.tsx b/frontend/calpoly-map/src/components/features/map/MapFilters.tsx
index 3be8434..de039d7 100644
--- a/frontend/calpoly-map/src/components/features/map/MapFilters.tsx
+++ b/frontend/calpoly-map/src/components/features/map/MapFilters.tsx
@@ -23,6 +23,7 @@ type Props = {
   onAmenityTypesChange: (ids: string[]) => void;
   buildingOptions: BuildingFilterOption[];
   amenityOptions: AmenityFilterOption[];
+  onPanelLayout?: (height: number) => void;
 };
 
 export function MapFilters({
@@ -34,6 +35,7 @@ export function MapFilters({
   onAmenityTypesChange,
   buildingOptions,
   amenityOptions,
+  onPanelLayout,
 }: Props) {
   const buildingSet = useMemo(() => new Set(buildingTypeIds), [buildingTypeIds]);
   const amenitySet = useMemo(() => new Set(amenityTypeIds), [amenityTypeIds]);
@@ -42,7 +44,9 @@ export function MapFilters({
 
   return (
     <View style={styles.container} pointerEvents="box-none">
-      <View style={styles.panel}>
+      <View 
+      style={styles.panel}
+        onLayout={(e) => onPanelLayout?.(e.nativeEvent.layout.height)}>
         <View style={styles.rowSpaceBetween}>
           <Text style={styles.panelTitle}>Map Style</Text>
           <Pressable
diff --git a/frontend/calpoly-map/src/components/map/MapContainer.tsx b/frontend/calpoly-map/src/components/map/MapContainer.tsx
index 7bc1f1f..3cf463e 100644
--- a/frontend/calpoly-map/src/components/map/MapContainer.tsx
+++ b/frontend/calpoly-map/src/components/map/MapContainer.tsx
@@ -170,6 +170,7 @@ export function MapContainer({
   }, [featureCenter, selectedBuilding]);
 
   const searchPanelHeight = useSharedValue<number>(0);
+  const [filtersPanelHeight, setFiltersPanelHeight] = useState(0);
   const windowHeight = Dimensions.get("window").height;
 
   const controlsAnimatedStyle = useAnimatedStyle(() => {
@@ -499,6 +500,7 @@ export function MapContainer({
         onAmenityTypesChange={setAmenityTypeIds}
         buildingOptions={buildingOptions}
         amenityOptions={amenityOptions}
+        onPanelLayout={setFiltersPanelHeight}
       />
 
       {(hasLoading || errorMessage) && (
@@ -529,49 +531,83 @@ export function MapContainer({
       )}
 
       {navigationMode ? (
-        <NavigationUI />
+        <>
+          <NavigationUI />
+          <Animated.View
+          style={[styles.zoomControlsNav, {top: filtersPanelHeight + 16}, controlsAnimatedStyle]}
+          pointerEvents="box-none"
+          >
+          <UserLocationButton />
+
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Zoom in"
+              onPress={() => handleZoom(1)}
+              style={styles.zoomButton}
+            >
+              <View style={styles.zoomIcon}>
+                <View style={styles.zoomIconBarHorizontal} />
+                <View style={styles.zoomIconBarVertical} />
+              </View>
+            </Pressable>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Zoom out"
+              onPress={() => handleZoom(-1)}
+              style={styles.zoomButton}
+            >
+              <View style={styles.zoomIcon}>
+                <View style={styles.zoomIconBarHorizontal} />
+              </View>
+            </Pressable>
+          </Animated.View>
+        </>
+        
       ) : (
-        <SearchPanel
-          cameraMove={handleCameraMove}
-          cameraFitRoute={handleCameraFitRoute}
-          bottomSheetPosition={searchPanelHeight}
-        />
+        <>
+          <SearchPanel
+            cameraMove={handleCameraMove}
+            cameraFitRoute={handleCameraFitRoute}
+            bottomSheetPosition={searchPanelHeight}
+          />
+
+          <Animated.View
+          style={[styles.zoomControls, controlsAnimatedStyle]}
+          pointerEvents="box-none"
+          >
+          <UserLocationButton />
+
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Zoom in"
+              onPress={() => handleZoom(1)}
+              style={styles.zoomButton}
+            >
+              <View style={styles.zoomIcon}>
+                <View style={styles.zoomIconBarHorizontal} />
+                <View style={styles.zoomIconBarVertical} />
+              </View>
+            </Pressable>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Zoom out"
+              onPress={() => handleZoom(-1)}
+              style={styles.zoomButton}
+            >
+              <View style={styles.zoomIcon}>
+                <View style={styles.zoomIconBarHorizontal} />
+              </View>
+            </Pressable>
+          </Animated.View>
+        </>
+        
       )}
-
       <BuildingPopup
         visible={!!selectedBuilding}
         building={selectedBuilding}
         onClose={clearSelection}
         onNavigate={handleNavigate}
       />
-      <Animated.View
-        style={[styles.zoomControls, controlsAnimatedStyle]}
-        pointerEvents="box-none"
-      >
-        <UserLocationButton />
-
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel="Zoom in"
-          onPress={() => handleZoom(1)}
-          style={styles.zoomButton}
-        >
-          <View style={styles.zoomIcon}>
-            <View style={styles.zoomIconBarHorizontal} />
-            <View style={styles.zoomIconBarVertical} />
-          </View>
-        </Pressable>
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel="Zoom out"
-          onPress={() => handleZoom(-1)}
-          style={styles.zoomButton}
-        >
-          <View style={styles.zoomIcon}>
-            <View style={styles.zoomIconBarHorizontal} />
-          </View>
-        </Pressable>
-      </Animated.View>
 
       <AmenityPopup
         visible={!!selectedAmenity}
@@ -658,6 +694,11 @@ const styles = StyleSheet.create({
     color: "#374151",
     fontWeight: "600",
   },
+  zoomControlsNav: {
+    position: "absolute",
+    right: 16,
+    gap: 10,
+  },
   zoomControls: {
     position: "absolute",
     right: 16,

From ea29e9381a3fc2bb3ed0512323d62f7383fae80b Mon Sep 17 00:00:00 2001
From: Scout Knight-Pheng <sknightp@calpoly.edu>
Date: Wed, 25 Feb 2026 19:52:45 -0800
Subject: [PATCH 2/2] fix: routing open sheet input focuses when opened

---
 .../src/components/features/search/SearchPanel.tsx     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/calpoly-map/src/components/features/search/SearchPanel.tsx b/frontend/calpoly-map/src/components/features/search/SearchPanel.tsx
index b8d6f90..d278132 100644
--- a/frontend/calpoly-map/src/components/features/search/SearchPanel.tsx
+++ b/frontend/calpoly-map/src/components/features/search/SearchPanel.tsx
@@ -61,6 +61,7 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition }:
   const routingSearchSheetRef = useRef<BottomSheet>(null);
   const routeStartInputRef = useRef<TextInput>(null);
   const routeEndInputRef = useRef<TextInput>(null);
+  const routingSearchInputRef = useRef<TextInput>(null);
 
   const snapPoints = useMemo(() => ["27%", "35%", "55%", "75%"], []);
   const routingSearchSnapPoints = useMemo(() => ["85%"], []);
@@ -154,6 +155,8 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition }:
   const openRoutingSearchSheet = useCallback(
     (field: "start" | "end") => {
       const value = field === "start" ? startValue : endValue;
+      routeStartInputRef.current?.blur();
+      routeEndInputRef.current?.blur();
       setActiveField(field);
       setSearchQuery(value);
       setFocused(true);
@@ -161,6 +164,10 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition }:
 
       requestAnimationFrame(() => {
         routingSearchSheetRef.current?.snapToIndex(0);
+        sheetRef.current?.snapToIndex(3);
+        setTimeout(() => {
+          routingSearchInputRef.current?.focus();
+        }, 120);
       });
     },
     [endValue, setSearchQuery, startValue],
@@ -537,6 +544,7 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition }:
               placeholder="Starting point"
               value={startValue}
               clearButtonMode="always"
+              showSoftInputOnFocus={false}
               onFocus={() => openRoutingSearchSheet("start")}
               onChangeText={(text) => {
                 setStartValue(text);
@@ -555,6 +563,7 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition }:
               autoCapitalize="none"
               autoCorrect={false}
               value={endValue}
+              showSoftInputOnFocus={false}
               onFocus={() => openRoutingSearchSheet("end")}
               onChangeText={(text) => {
                 setEndValue(text);
@@ -683,6 +692,7 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition }:
         </View>
 
         <BottomSheetTextInput
+          ref={routingSearchInputRef}
           style={styles.input}
           placeholder={
             activeField === "start"