Repository: bcgov/PSP
Pull request #4734: psp-10008 allow lat/lng search on property picker.
Author: login: devinleighsmith
Labels: name: enhancement
description: New feature or request
Created: 2025-04-03T02:09:14Z | Merged: 2025-04-15T06:04:49Z



Diff:
diff --git a/source/frontend/src/components/common/List/SelectInput.tsx b/source/frontend/src/components/common/List/SelectInput.tsx
index c76e942e76..c039917861 100644
--- a/source/frontend/src/components/common/List/SelectInput.tsx
+++ b/source/frontend/src/components/common/List/SelectInput.tsx
@@ -19,6 +19,7 @@ interface ISelectInputProps<SelectTypes> {
     key: keyof SelectTypes;
     label: string;
     placeholder: string;
+    hideInput?: boolean;
   }[];
   autoSetting?: string;
   /** Callback to notify when the selected option in the drop-down changes */
@@ -58,6 +59,7 @@ export function SelectInput<SelectTypes, FormikType>({
       field={value}
       placeholder={selectedOption?.placeholder}
       disabled={disabled}
+      content={selectedOption?.hideInput ? <></> : undefined}
       {...rest}
     ></InputGroup>
   );
diff --git a/source/frontend/src/components/maps/MapSearch.tsx b/source/frontend/src/components/maps/MapSearch.tsx
index 763cea48c2..000175d897 100644
--- a/source/frontend/src/components/maps/MapSearch.tsx
+++ b/source/frontend/src/components/maps/MapSearch.tsx
@@ -1,7 +1,6 @@
 import { dequal } from 'dequal';
 import { LatLngLiteral } from 'leaflet';
 import React, { useEffect, useState } from 'react';
-import { Container } from 'react-bootstrap';
 import styled from 'styled-components';
 
 import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
@@ -50,7 +49,7 @@ const MapSearch: React.FC<React.PropsWithChildren<MapSearchProps>> = () => {
   };
 
   return (
-    <StyledFilterContainer fluid className="px-0">
+    <StyledFilterContainer className="px-0">
       <PropertyFilter
         propertyFilter={propertySearchFilter}
         useGeocoder={true}
@@ -65,7 +64,7 @@ const MapSearch: React.FC<React.PropsWithChildren<MapSearchProps>> = () => {
 
 export default MapSearch;
 
-const StyledFilterContainer = styled(Container)`
+const StyledFilterContainer = styled.div`
   transition: margin 1s;
 
   grid-area: filter;
diff --git a/source/frontend/src/components/maps/__snapshots__/MapSearch.test.tsx.snap b/source/frontend/src/components/maps/__snapshots__/MapSearch.test.tsx.snap
index a6cbe44b71..d4fd7b6f59 100644
--- a/source/frontend/src/components/maps/__snapshots__/MapSearch.test.tsx.snap
+++ b/source/frontend/src/components/maps/__snapshots__/MapSearch.test.tsx.snap
@@ -339,14 +339,14 @@ exports[`MapSearch component > renders as expected 1`] = `
 }
 
 <div
-    class="c0 px-0 container-fluid"
+    class="c0 px-0"
   >
     <form
       class=""
       novalidate=""
     >
       <div
-        class="map-filter-bar pb-4 form-row"
+        class="map-filter-bar pb-4 row"
       >
         <div
           class="col-auto"
@@ -419,7 +419,7 @@ exports[`MapSearch component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c3 col-xl-3 col-lg-4 col-md-2 col-3"
+          class="c3 col-xl-3 col-4"
         >
           <div
             class="input form-group"
diff --git a/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap b/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
index 6c823885b9..8f51822058 100644
--- a/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
@@ -605,10 +605,10 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
               novalidate=""
             >
               <div
-                class="row"
+                class="row no-gutters"
               >
                 <div
-                  class="col-xl-6"
+                  class="col-6"
                 >
                   <div
                     class="flex-nowrap input-group row"
@@ -662,6 +662,13 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
                             >
                               Legal Description
                             </option>
+                            <option
+                              class="option"
+                              data-testid="select-option-coordinates"
+                              value="coordinates"
+                            >
+                              Lat/Long
+                            </option>
                           </select>
                         </div>
                       </div>
@@ -687,7 +694,7 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
                   </div>
                 </div>
                 <div
-                  class="pr-0 col-xl-2"
+                  class="pr-0 col-2"
                 >
                   <div
                     class="row"
diff --git a/source/frontend/src/components/propertySelector/models.ts b/source/frontend/src/components/propertySelector/models.ts
index 3b86d4cc73..bf36f3b46d 100644
--- a/source/frontend/src/components/propertySelector/models.ts
+++ b/source/frontend/src/components/propertySelector/models.ts
@@ -2,6 +2,7 @@ import { MultiPolygon, Polygon } from 'geojson';
 import { LatLngLiteral } from 'leaflet';
 
 import { AreaUnitTypes } from '@/constants';
+import { DmsCoordinates } from '@/features/properties/filter/CoordinateSearch/models';
 
 export interface IMapProperty {
   propertyId?: number;
@@ -30,4 +31,5 @@ export interface ILayerSearchCriteria {
   searchBy?: string;
   address?: string;
   historical?: string;
+  coordinates?: DmsCoordinates | null;
 }
diff --git a/source/frontend/src/components/propertySelector/search/LayerFilter.test.tsx b/source/frontend/src/components/propertySelector/search/LayerFilter.test.tsx
index c81445fd83..9d8c56282f 100644
--- a/source/frontend/src/components/propertySelector/search/LayerFilter.test.tsx
+++ b/source/frontend/src/components/propertySelector/search/LayerFilter.test.tsx
@@ -2,7 +2,7 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
 import { mockGeocoderOptions } from '@/mocks/index.mock';
-import { act, fillInput, render, RenderOptions } from '@/utils/test-utils';
+import { act, fillInput, render, RenderOptions, userEvent } from '@/utils/test-utils';
 
 import LayerFilter, { defaultLayerFilter } from './LayerFilter';
 
@@ -20,7 +20,7 @@ describe('LayerFilter component', () => {
     const searchBy = renderOptions.searchBy || 'address';
     const utils = render(
       <LayerFilter
-        setFilter={setFilter}
+        onSearch={setFilter}
         addressResults={mockGeocoderOptions}
         filter={{ ...defaultLayerFilter, searchBy }}
         onAddressChange={onAddressChange}
@@ -97,4 +97,51 @@ describe('LayerFilter component', () => {
     const option = getByText('1234 Fake St');
     expect(option).toBeInTheDocument();
   });
+
+  it('shall have a coordinate searchBy field', async () => {
+    const { container, getByText } = setup({});
+
+    await act(async () => {
+      await fillInput(container, 'searchBy', 'coordinates', 'select');
+    });
+
+    expect(getByText('Lat:')).toBeVisible();
+  });
+
+  it('searches by coordinates', async () => {
+    const { container, getByTestId } = setup({});
+
+    await act(async () => {
+      await fillInput(container, 'searchBy', 'coordinates', 'select');
+    });
+
+    const searchButton = getByTestId('search');
+
+    await act(async () => {
+      userEvent.click(searchButton);
+    });
+
+    expect(setFilter).toHaveBeenCalledWith({
+      address: '',
+      coordinates: {
+        latitude: {
+          degrees: 0,
+          direction: '1',
+          minutes: 0,
+          seconds: 0,
+        },
+        longitude: {
+          degrees: 0,
+          direction: '-1',
+          minutes: 0,
+          seconds: 0,
+        },
+      },
+      legalDescription: '',
+      pid: '',
+      pin: '',
+      planNumber: '',
+      searchBy: 'coordinates',
+    });
+  });
 });
diff --git a/source/frontend/src/components/propertySelector/search/LayerFilter.tsx b/source/frontend/src/components/propertySelector/search/LayerFilter.tsx
index ab6d7a6da7..f01ae6025d 100644
--- a/source/frontend/src/components/propertySelector/search/LayerFilter.tsx
+++ b/source/frontend/src/components/propertySelector/search/LayerFilter.tsx
@@ -8,6 +8,9 @@ import styled from 'styled-components';
 import { ResetButton, SearchButton } from '@/components/common/buttons';
 import { Form } from '@/components/common/form';
 import { SelectInput } from '@/components/common/List/SelectInput';
+import { CoordinateSearchForm } from '@/features/properties/filter/CoordinateSearch/CoordinateSearchForm';
+import { DmsCoordinates } from '@/features/properties/filter/CoordinateSearch/models';
+import { PropertyFilterValidationSchema } from '@/features/properties/filter/validation';
 import { IResearchFilterProps } from '@/features/research/list/ResearchFilter/ResearchFilter';
 import { IGeocoderResponse } from '@/hooks/pims-api/interfaces/IGeocoder';
 
@@ -19,11 +22,12 @@ export const defaultLayerFilter: ILayerSearchCriteria = {
   planNumber: '',
   legalDescription: '',
   address: '',
+  coordinates: null,
   searchBy: 'pid',
 };
 
 export interface ILayerFilterProps {
-  setFilter: (searchCriteria: ILayerSearchCriteria) => void;
+  onSearch: (searchCriteria: ILayerSearchCriteria) => void;
   filter?: ILayerSearchCriteria;
   addressResults?: IGeocoderResponse[];
   onAddressChange: (searchText: string) => void;
@@ -36,7 +40,7 @@ export interface ILayerFilterProps {
  * @param {IResearchFilterProps} props
  */
 export const LayerFilter: React.FunctionComponent<React.PropsWithChildren<ILayerFilterProps>> = ({
-  setFilter,
+  onSearch,
   filter,
   addressResults,
   onAddressChange,
@@ -46,11 +50,7 @@ export const LayerFilter: React.FunctionComponent<React.PropsWithChildren<ILayer
   const formikRef = useRef<FormikProps<ILayerSearchCriteria>>(null);
 
   const onSearchSubmit = (values: ILayerSearchCriteria) => {
-    setFilter(values);
-  };
-
-  const resetFilter = () => {
-    setFilter(defaultLayerFilter);
+    onSearch(values);
   };
 
   const onSuggestionSelected = (val: IGeocoderResponse) => {
@@ -79,8 +79,16 @@ export const LayerFilter: React.FunctionComponent<React.PropsWithChildren<ILayer
   };
 
   const internalFilter = filter ?? { ...defaultLayerFilter };
-  const isSearchByAddress = internalFilter?.searchBy === 'address';
-  const isSearchByLegalDescription = internalFilter?.searchBy === 'legalDescription';
+
+  const getSpacing = (searchBy: string) => {
+    let searchColSpacing = 6;
+    if (searchBy === 'legalDescription') {
+      searchColSpacing = 10;
+    } else if (searchBy === 'coordinates') {
+      searchColSpacing = 3;
+    }
+    return searchColSpacing;
+  };
 
   return (
     <Formik
@@ -88,25 +96,28 @@ export const LayerFilter: React.FunctionComponent<React.PropsWithChildren<ILayer
       initialValues={internalFilter}
       onSubmit={onSearchSubmit}
       innerRef={formikRef}
+      validationSchema={PropertyFilterValidationSchema}
     >
       {formikProps => (
         <FilterBoxForm className="p-3">
-          <Row>
-            <Col xl={isSearchByLegalDescription ? 10 : 6}>
+          <Row noGutters>
+            <Col xs={getSpacing(formikProps.values.searchBy)}>
               <SelectInput<ILayerSearchCriteria, IResearchFilterProps>
                 field="searchBy"
                 defaultKey="pid"
-                as={isSearchByLegalDescription ? 'textarea' : 'input'}
+                as={formikProps.values.searchBy === 'legalDescription' ? 'textarea' : 'input'}
                 helpText={
-                  isSearchByLegalDescription
+                  formikProps.values.searchBy === 'legalDescription'
                     ? 'Searching by Legal Description may result in a slower search.'
                     : ''
                 }
                 onSelectItemChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                  setFilter({ ...internalFilter, searchBy: e.target.value });
+                  if (e.target.value === 'coordinates') {
+                    formikProps.setFieldValue('coordinates', new DmsCoordinates());
+                  }
                 }}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  if (isSearchByAddress && onAddressChange) {
+                  if (formikProps.values.searchBy === 'address' && onAddressChange) {
                     onAddressChange(e.target.value);
                   }
                 }}
@@ -136,12 +147,26 @@ export const LayerFilter: React.FunctionComponent<React.PropsWithChildren<ILayer
                     placeholder: '',
                     label: 'Legal Description',
                   },
+                  {
+                    label: 'Lat/Long',
+                    key: 'coordinates',
+                    placeholder: `Enter a Latitude and Longitude`,
+                    hideInput: true,
+                  },
                 ]}
                 autoSetting="off"
               />
-              {isSearchByAddress && renderAddressSuggestions()}
+              {formikProps.values.searchBy === 'address' && renderAddressSuggestions()}
             </Col>
-            <Col xl={2} className="pr-0">
+            {formikProps.values.searchBy === 'coordinates' && (
+              <Col>
+                <CoordinateSearchForm
+                  field="coordinates"
+                  innerClassName="flex-column"
+                ></CoordinateSearchForm>
+              </Col>
+            )}
+            <Col xs={2} className="pr-0">
               <Row>
                 <Col className="pr-0">
                   <SearchButton disabled={loading} onClick={formikProps.submitForm} type="button" />
@@ -151,7 +176,6 @@ export const LayerFilter: React.FunctionComponent<React.PropsWithChildren<ILayer
                     disabled={loading}
                     onClick={() => {
                       formikProps.resetForm();
-                      resetFilter();
                     }}
                   />
                 </Col>
diff --git a/source/frontend/src/components/propertySelector/search/PropertySearchSelectorFormView.test.tsx b/source/frontend/src/components/propertySelector/search/PropertySearchSelectorFormView.test.tsx
index 7cf5544d12..af3c86237f 100644
--- a/source/frontend/src/components/propertySelector/search/PropertySearchSelectorFormView.test.tsx
+++ b/source/frontend/src/components/propertySelector/search/PropertySearchSelectorFormView.test.tsx
@@ -153,6 +153,8 @@ describe('PropertySearchSelectorFormView component', () => {
         await fillInput(container, 'pid', '123-456-789');
       });
       expect(queryByDisplayValue('123-456-789')).toBeVisible(); //ensure that expected input value is present.
+      const searchButton = getByTitle('search');
+      act(() => userEvent.click(searchButton));
 
       const resetButton = getByTitle('reset-button');
       await act(async () => userEvent.click(resetButton));
diff --git a/source/frontend/src/components/propertySelector/search/PropertySearchSelectorFormView.tsx b/source/frontend/src/components/propertySelector/search/PropertySearchSelectorFormView.tsx
index 7ce38b746a..51cfe8fc61 100644
--- a/source/frontend/src/components/propertySelector/search/PropertySearchSelectorFormView.tsx
+++ b/source/frontend/src/components/propertySelector/search/PropertySearchSelectorFormView.tsx
@@ -59,7 +59,7 @@ export const PropertySearchSelectorFormView: React.FunctionComponent<
       <Section header={undefined}>
         <Styled.H3>Search for a property</Styled.H3>
         <LayerFilter
-          setFilter={onSearch}
+          onSearch={onSearch}
           filter={search}
           addressResults={addressResults}
           onAddressChange={onAddressChange}
diff --git a/source/frontend/src/components/propertySelector/search/PropertySelectorSearchContainer.test.tsx b/source/frontend/src/components/propertySelector/search/PropertySelectorSearchContainer.test.tsx
index 07e676fd88..b42f6981af 100644
--- a/source/frontend/src/components/propertySelector/search/PropertySelectorSearchContainer.test.tsx
+++ b/source/frontend/src/components/propertySelector/search/PropertySelectorSearchContainer.test.tsx
@@ -251,4 +251,23 @@ describe('PropertySelectorSearchContainer component', () => {
       );
     });
   });
+
+  it('searches by lat/lng', async () => {
+    const { container, getByTitle } = setup({});
+
+    await act(async () => {
+      await fillInput(container, 'searchBy', 'coordinates', 'select');
+    });
+
+    const searchButton = getByTitle('search');
+    await act(async () => {
+      userEvent.click(searchButton);
+    });
+
+    await waitFor(() => {
+      expect(mockAxios.history.get[0].url).toBe(
+        'https://openmaps.gov.bc.ca/geo/pub/WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW/wfs?service=WFS&REQUEST=GetFeature&VERSION=1.3.0&outputFormat=application/json&typeNames=pub:WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW&srsName=EPSG:4326&cql_filter=CONTAINS(SHAPE,SRID=4326;POINT ( 0 0))',
+      );
+    });
+  });
 });
diff --git a/source/frontend/src/components/propertySelector/search/PropertySelectorSearchContainer.tsx b/source/frontend/src/components/propertySelector/search/PropertySelectorSearchContainer.tsx
index bf1c94640c..8b0f686279 100644
--- a/source/frontend/src/components/propertySelector/search/PropertySelectorSearchContainer.tsx
+++ b/source/frontend/src/components/propertySelector/search/PropertySelectorSearchContainer.tsx
@@ -2,7 +2,7 @@ import { Feature, FeatureCollection, GeoJsonProperties, Geometry } from 'geojson
 import { LatLngLiteral } from 'leaflet';
 import debounce from 'lodash/debounce';
 import isNumber from 'lodash/isNumber';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import { LocationFeatureDataset } from '@/components/common/mapFSM/useLocationFeatureLoader';
@@ -29,7 +29,6 @@ export const PropertySelectorSearchContainer: React.FC<IPropertySelectorSearchCo
   selectedProperties,
   setSelectedProperties,
 }) => {
-  const [layerSearch, setLayerSearch] = useState<ILayerSearchCriteria | undefined>();
   const [searchResults, setSearchResults] = useState<LocationFeatureDataset[]>([]);
   const [addressResults, setAddressResults] = useState<IGeocoderResponse[]>([]);
 
@@ -54,10 +53,12 @@ export const PropertySelectorSearchContainer: React.FC<IPropertySelectorSearchCo
     findByPlanNumber,
     findByLegalDescription,
     findByLoading: isMapLayerLoading,
+    findMany,
+    findManyLoading,
   } = useFullyAttributedParcelMapLayer();
 
-  useEffect(() => {
-    const searchFunc = async () => {
+  const searchFunc = useCallback(
+    async (layerSearch: ILayerSearchCriteria) => {
       let result: FeatureCollection<Geometry, PMBC_FullyAttributed_Feature_Properties> | undefined =
         undefined;
       if (layerSearch?.searchBy === 'pid' && layerSearch.pid) {
@@ -75,6 +76,8 @@ export const PropertySelectorSearchContainer: React.FC<IPropertySelectorSearchCo
       } else if (layerSearch?.searchBy === 'address' && layerSearch.address) {
         // Ignore address searches
         return;
+      } else if (layerSearch?.searchBy === 'coordinates' && layerSearch.coordinates) {
+        result = await findMany(layerSearch.coordinates.toLatLng());
       }
 
       // match the region and district for all found properties
@@ -122,19 +125,19 @@ export const PropertySelectorSearchContainer: React.FC<IPropertySelectorSearchCo
         const locations = result?.features?.map(p => featureToLocationFeatureDataset(p));
         setSearchResults(locations ?? []);
       }
-    };
-    searchFunc();
-  }, [
-    findByLegalDescription,
-    findByPid,
-    findByPin,
-    findByPlanNumber,
-    getNearestToPoint,
-    layerSearch,
-    findRegion,
-    findDistrict,
-    loadPimsProperties,
-  ]);
+    },
+    [
+      findByLegalDescription,
+      findByPid,
+      findByPin,
+      findByPlanNumber,
+      getNearestToPoint,
+      findRegion,
+      findDistrict,
+      loadPimsProperties,
+      findMany,
+    ],
+  );
 
   const handleOnAddressSelect = async (selectedItem: IGeocoderResponse) => {
     if (!selectedItem.siteId) {
@@ -205,9 +208,8 @@ export const PropertySelectorSearchContainer: React.FC<IPropertySelectorSearchCo
 
   return (
     <PropertySearchSelectorFormView
-      onSearch={setLayerSearch}
+      onSearch={searchFunc}
       selectedProperties={selectedProperties}
-      search={layerSearch}
       searchResults={searchResults}
       loading={
         isMapLayerLoading ||
@@ -215,7 +217,8 @@ export const PropertySelectorSearchContainer: React.FC<IPropertySelectorSearchCo
         isLoadingNearestToPoint ||
         isLoadingSitePids ||
         findRegionLoading ||
-        findDistrictLoading
+        findDistrictLoading ||
+        findManyLoading
       }
       onSelectedProperties={setSelectedProperties}
       addressResults={addressResults}
diff --git a/source/frontend/src/components/propertySelector/search/__snapshots__/LayerFilter.test.tsx.snap b/source/frontend/src/components/propertySelector/search/__snapshots__/LayerFilter.test.tsx.snap
index f91321f37c..4e66564570 100644
--- a/source/frontend/src/components/propertySelector/search/__snapshots__/LayerFilter.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/search/__snapshots__/LayerFilter.test.tsx.snap
@@ -251,10 +251,10 @@ exports[`LayerFilter component > renders as expected 1`] = `
     novalidate=""
   >
     <div
-      class="row"
+      class="row no-gutters"
     >
       <div
-        class="col-xl-6"
+        class="col-6"
       >
         <div
           class="flex-nowrap input-group row"
@@ -308,6 +308,13 @@ exports[`LayerFilter component > renders as expected 1`] = `
                   >
                     Legal Description
                   </option>
+                  <option
+                    class="option"
+                    data-testid="select-option-coordinates"
+                    value="coordinates"
+                  >
+                    Lat/Long
+                  </option>
                 </select>
               </div>
             </div>
@@ -343,7 +350,7 @@ exports[`LayerFilter component > renders as expected 1`] = `
         </div>
       </div>
       <div
-        class="pr-0 col-xl-2"
+        class="pr-0 col-2"
       >
         <div
           class="row"
diff --git a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
index 3b264d099d..b8b450c063 100644
--- a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
@@ -280,10 +280,10 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
         novalidate=""
       >
         <div
-          class="row"
+          class="row no-gutters"
         >
           <div
-            class="col-xl-6"
+            class="col-6"
           >
             <div
               class="flex-nowrap input-group row"
@@ -337,6 +337,13 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
                       >
                         Legal Description
                       </option>
+                      <option
+                        class="option"
+                        data-testid="select-option-coordinates"
+                        value="coordinates"
+                      >
+                        Lat/Long
+                      </option>
                     </select>
                   </div>
                 </div>
@@ -362,7 +369,7 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
             </div>
           </div>
           <div
-            class="pr-0 col-xl-2"
+            class="pr-0 col-2"
           >
             <div
               class="row"
diff --git a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
index ada23edb2e..6c5318b954 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
@@ -1345,10 +1345,10 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
                               novalidate=""
                             >
                               <div
-                                class="row"
+                                class="row no-gutters"
                               >
                                 <div
-                                  class="col-xl-6"
+                                  class="col-6"
                                 >
                                   <div
                                     class="flex-nowrap input-group row"
@@ -1402,6 +1402,13 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
                                             >
                                               Legal Description
                                             </option>
+                                            <option
+                                              class="option"
+                                              data-testid="select-option-coordinates"
+                                              value="coordinates"
+                                            >
+                                              Lat/Long
+                                            </option>
                                           </select>
                                         </div>
                                       </div>
@@ -1427,7 +1434,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
                                   </div>
                                 </div>
                                 <div
-                                  class="pr-0 col-xl-2"
+                                  class="pr-0 col-2"
                                 >
                                   <div
                                     class="row"
diff --git a/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap b/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap
index b826b80172..1c610e207b 100644
--- a/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap
+++ b/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap
@@ -785,10 +785,10 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
                       novalidate=""
                     >
                       <div
-                        class="row"
+                        class="row no-gutters"
                       >
                         <div
-                          class="col-xl-6"
+                          class="col-6"
                         >
                           <div
                             class="flex-nowrap input-group row"
@@ -842,6 +842,13 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
                                     >
                                       Legal Description
                                     </option>
+                                    <option
+                                      class="option"
+                                      data-testid="select-option-coordinates"
+                                      value="coordinates"
+                                    >
+                                      Lat/Long
+                                    </option>
                                   </select>
                                 </div>
                               </div>
@@ -867,7 +874,7 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
                           </div>
                         </div>
                         <div
-                          class="pr-0 col-xl-2"
+                          class="pr-0 col-2"
                         >
                           <div
                             class="row"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
index 1c2f4fab9a..d918dd2477 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
@@ -616,10 +616,10 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
                   novalidate=""
                 >
                   <div
-                    class="row"
+                    class="row no-gutters"
                   >
                     <div
-                      class="col-xl-6"
+                      class="col-6"
                     >
                       <div
                         class="flex-nowrap input-group row"
@@ -673,6 +673,13 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
                                 >
                                   Legal Description
                                 </option>
+                                <option
+                                  class="option"
+                                  data-testid="select-option-coordinates"
+                                  value="coordinates"
+                                >
+                                  Lat/Long
+                                </option>
                               </select>
                             </div>
                           </div>
@@ -698,7 +705,7 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
                       </div>
                     </div>
                     <div
-                      class="pr-0 col-xl-2"
+                      class="pr-0 col-2"
                     >
                       <div
                         class="row"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
index bb2af69c33..5239356e42 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
@@ -1874,10 +1874,10 @@ exports[`AddAcquisitionContainer component > Sub-interest file > renders as expe
                                 novalidate=""
                               >
                                 <div
-                                  class="row"
+                                  class="row no-gutters"
                                 >
                                   <div
-                                    class="col-xl-6"
+                                    class="col-6"
                                   >
                                     <div
                                       class="flex-nowrap input-group row"
@@ -1931,6 +1931,13 @@ exports[`AddAcquisitionContainer component > Sub-interest file > renders as expe
                                               >
                                                 Legal Description
                                               </option>
+                                              <option
+                                                class="option"
+                                                data-testid="select-option-coordinates"
+                                                value="coordinates"
+                                              >
+                                                Lat/Long
+                                              </option>
                                             </select>
                                           </div>
                                         </div>
@@ -1956,7 +1963,7 @@ exports[`AddAcquisitionContainer component > Sub-interest file > renders as expe
                                     </div>
                                   </div>
                                   <div
-                                    class="pr-0 col-xl-2"
+                                    class="pr-0 col-2"
                                   >
                                     <div
                                       class="row"
@@ -4798,10 +4805,10 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
                                 novalidate=""
                               >
                                 <div
-                                  class="row"
+                                  class="row no-gutters"
                                 >
                                   <div
-                                    class="col-xl-6"
+                                    class="col-6"
                                   >
                                     <div
                                       class="flex-nowrap input-group row"
@@ -4855,6 +4862,13 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
                                               >
                                                 Legal Description
                                               </option>
+                                              <option
+                                                class="option"
+                                                data-testid="select-option-coordinates"
+                                                value="coordinates"
+                                              >
+                                                Lat/Long
+                                              </option>
                                             </select>
                                           </div>
                                         </div>
@@ -4880,7 +4894,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="pr-0 col-xl-2"
+                                    class="pr-0 col-2"
                                   >
                                     <div
                                       class="row"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
index 8fbd021467..015a2763cf 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
@@ -1642,10 +1642,10 @@ exports[`AddAcquisitionForm component > Sub-interest files > renders as expected
                         novalidate=""
                       >
                         <div
-                          class="row"
+                          class="row no-gutters"
                         >
                           <div
-                            class="col-xl-6"
+                            class="col-6"
                           >
                             <div
                               class="flex-nowrap input-group row"
@@ -1699,6 +1699,13 @@ exports[`AddAcquisitionForm component > Sub-interest files > renders as expected
                                       >
                                         Legal Description
                                       </option>
+                                      <option
+                                        class="option"
+                                        data-testid="select-option-coordinates"
+                                        value="coordinates"
+                                      >
+                                        Lat/Long
+                                      </option>
                                     </select>
                                   </div>
                                 </div>
@@ -1724,7 +1731,7 @@ exports[`AddAcquisitionForm component > Sub-interest files > renders as expected
                             </div>
                           </div>
                           <div
-                            class="pr-0 col-xl-2"
+                            class="pr-0 col-2"
                           >
                             <div
                               class="row"
@@ -4280,10 +4287,10 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
                         novalidate=""
                       >
                         <div
-                          class="row"
+                          class="row no-gutters"
                         >
                           <div
-                            class="col-xl-6"
+                            class="col-6"
                           >
                             <div
                               class="flex-nowrap input-group row"
@@ -4337,6 +4344,13 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
                                       >
                                         Legal Description
                                       </option>
+                                      <option
+                                        class="option"
+                                        data-testid="select-option-coordinates"
+                                        value="coordinates"
+                                      >
+                                        Lat/Long
+                                      </option>
                                     </select>
                                   </div>
                                 </div>
@@ -4362,7 +4376,7 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
                             </div>
                           </div>
                           <div
-                            class="pr-0 col-xl-2"
+                            class="pr-0 col-2"
                           >
                             <div
                               class="row"
diff --git a/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
index 8db3890a32..abbb8b882d 100644
--- a/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
@@ -1127,10 +1127,10 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
                                 novalidate=""
                               >
                                 <div
-                                  class="row"
+                                  class="row no-gutters"
                                 >
                                   <div
-                                    class="col-xl-6"
+                                    class="col-6"
                                   >
                                     <div
                                       class="flex-nowrap input-group row"
@@ -1184,6 +1184,13 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
                                               >
                                                 Legal Description
                                               </option>
+                                              <option
+                                                class="option"
+                                                data-testid="select-option-coordinates"
+                                                value="coordinates"
+                                              >
+                                                Lat/Long
+                                              </option>
                                             </select>
                                           </div>
                                         </div>
@@ -1209,7 +1216,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="pr-0 col-xl-2"
+                                    class="pr-0 col-2"
                                   >
                                     <div
                                       class="row"
diff --git a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
index 99c3887bac..eaaf8b4b4b 100644
--- a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
@@ -616,10 +616,10 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
                   novalidate=""
                 >
                   <div
-                    class="row"
+                    class="row no-gutters"
                   >
                     <div
-                      class="col-xl-6"
+                      class="col-6"
                     >
                       <div
                         class="flex-nowrap input-group row"
@@ -673,6 +673,13 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
                                 >
                                   Legal Description
                                 </option>
+                                <option
+                                  class="option"
+                                  data-testid="select-option-coordinates"
+                                  value="coordinates"
+                                >
+                                  Lat/Long
+                                </option>
                               </select>
                             </div>
                           </div>
@@ -698,7 +705,7 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
                       </div>
                     </div>
                     <div
-                      class="pr-0 col-xl-2"
+                      class="pr-0 col-2"
                     >
                       <div
                         class="row"
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
index 4c06ed1845..86542bcf62 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
@@ -1095,10 +1095,10 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
                                 novalidate=""
                               >
                                 <div
-                                  class="row"
+                                  class="row no-gutters"
                                 >
                                   <div
-                                    class="col-xl-6"
+                                    class="col-6"
                                   >
                                     <div
                                       class="flex-nowrap input-group row"
@@ -1152,6 +1152,13 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
                                               >
                                                 Legal Description
                                               </option>
+                                              <option
+                                                class="option"
+                                                data-testid="select-option-coordinates"
+                                                value="coordinates"
+                                              >
+                                                Lat/Long
+                                              </option>
                                             </select>
                                           </div>
                                         </div>
@@ -1177,7 +1184,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="pr-0 col-xl-2"
+                                    class="pr-0 col-2"
                                   >
                                     <div
                                       class="row"
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
index 022bbe541d..8f42279402 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
@@ -859,10 +859,10 @@ exports[`AddResearchForm component > renders as expected 1`] = `
                         novalidate=""
                       >
                         <div
-                          class="row"
+                          class="row no-gutters"
                         >
                           <div
-                            class="col-xl-6"
+                            class="col-6"
                           >
                             <div
                               class="flex-nowrap input-group row"
@@ -916,6 +916,13 @@ exports[`AddResearchForm component > renders as expected 1`] = `
                                       >
                                         Legal Description
                                       </option>
+                                      <option
+                                        class="option"
+                                        data-testid="select-option-coordinates"
+                                        value="coordinates"
+                                      >
+                                        Lat/Long
+                                      </option>
                                     </select>
                                   </div>
                                 </div>
@@ -941,7 +948,7 @@ exports[`AddResearchForm component > renders as expected 1`] = `
                             </div>
                           </div>
                           <div
-                            class="pr-0 col-xl-2"
+                            class="pr-0 col-2"
                           >
                             <div
                               class="row"
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
index 1a510b4468..972ededb54 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
@@ -766,10 +766,10 @@ exports[`ResearchProperties component > renders as expected when provided no pro
                       novalidate=""
                     >
                       <div
-                        class="row"
+                        class="row no-gutters"
                       >
                         <div
-                          class="col-xl-6"
+                          class="col-6"
                         >
                           <div
                             class="flex-nowrap input-group row"
@@ -823,6 +823,13 @@ exports[`ResearchProperties component > renders as expected when provided no pro
                                     >
                                       Legal Description
                                     </option>
+                                    <option
+                                      class="option"
+                                      data-testid="select-option-coordinates"
+                                      value="coordinates"
+                                    >
+                                      Lat/Long
+                                    </option>
                                   </select>
                                 </div>
                               </div>
@@ -848,7 +855,7 @@ exports[`ResearchProperties component > renders as expected when provided no pro
                           </div>
                         </div>
                         <div
-                          class="pr-0 col-xl-2"
+                          class="pr-0 col-2"
                         >
                           <div
                             class="row"
diff --git a/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
index 40592cc6d6..16710cb41f 100644
--- a/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
@@ -942,10 +942,10 @@ exports[`UpdateProperties component > renders as expected 1`] = `
                           novalidate=""
                         >
                           <div
-                            class="row"
+                            class="row no-gutters"
                           >
                             <div
-                              class="col-xl-6"
+                              class="col-6"
                             >
                               <div
                                 class="flex-nowrap input-group row"
@@ -999,6 +999,13 @@ exports[`UpdateProperties component > renders as expected 1`] = `
                                         >
                                           Legal Description
                                         </option>
+                                        <option
+                                          class="option"
+                                          data-testid="select-option-coordinates"
+                                          value="coordinates"
+                                        >
+                                          Lat/Long
+                                        </option>
                                       </select>
                                     </div>
                                   </div>
@@ -1024,7 +1031,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
                               </div>
                             </div>
                             <div
-                              class="pr-0 col-xl-2"
+                              class="pr-0 col-2"
                             >
                               <div
                                 class="row"
diff --git a/source/frontend/src/features/properties/filter/CoordinateSearch/CoordinateSearchForm.tsx b/source/frontend/src/features/properties/filter/CoordinateSearch/CoordinateSearchForm.tsx
index 793527aef9..994d606d3f 100644
--- a/source/frontend/src/features/properties/filter/CoordinateSearch/CoordinateSearchForm.tsx
+++ b/source/frontend/src/features/properties/filter/CoordinateSearch/CoordinateSearchForm.tsx
@@ -1,4 +1,5 @@
-import { Col, Container, Form } from 'react-bootstrap';
+import clsx from 'classnames';
+import { Col, Row } from 'react-bootstrap';
 import styled from 'styled-components';
 
 import { NumberInput, Select } from '@/components/common/form';
@@ -8,84 +9,105 @@ import { DmsDirection } from './models';
 
 export interface ICoordinateSearchProps {
   field: string;
+  innerClassName?: string;
 }
 
 export const CoordinateSearchForm: React.FunctionComponent<ICoordinateSearchProps> = ({
   field,
+  innerClassName,
 }) => {
   return (
-    <Container fluid>
-      <Form.Row className="d-flex align-items-center">
-        <Col xs="auto">Lat:</Col>
-        <StyledCol9Rem>
-          <StyledNumberInput
-            field={withNameSpace(field, 'latitude.degrees')}
-            onFocus={e => e.target.select()}
-            displayErrorTooltips
-          ></StyledNumberInput>
-        </StyledCol9Rem>
-        &thinsp;°&thinsp;
-        <StyledCol9Rem>
-          <StyledNumberInput
-            field={withNameSpace(field, 'latitude.minutes')}
-            onFocus={e => e.target.select()}
-            displayErrorTooltips
-          ></StyledNumberInput>
-        </StyledCol9Rem>
-        &thinsp;’&thinsp;
-        <StyledCol10Rem>
-          <StyledNumberInput
-            field={withNameSpace(field, 'latitude.seconds')}
-            onFocus={e => e.target.select()}
-            displayErrorTooltips
-          ></StyledNumberInput>
-        </StyledCol10Rem>
-        &thinsp;”&thinsp;
-        <Col xs="auto">
-          <StyledSelect
-            field={withNameSpace(field, 'latitude.direction')}
-            options={[
-              { label: 'N', value: DmsDirection.N },
-              { label: 'S', value: DmsDirection.S },
-            ]}
-          ></StyledSelect>
-        </Col>
-        <Col xs="auto">Long:</Col>
-        <StyledCol9Rem>
-          <StyledNumberInput
-            field={withNameSpace(field, 'longitude.degrees')}
-            onFocus={e => e.target.select()}
-            displayErrorTooltips
-          ></StyledNumberInput>
-        </StyledCol9Rem>
-        &thinsp;°&thinsp;
-        <StyledCol9Rem>
-          <StyledNumberInput
-            field={withNameSpace(field, 'longitude.minutes')}
-            onFocus={e => e.target.select()}
-            displayErrorTooltips
-          ></StyledNumberInput>
-        </StyledCol9Rem>
-        &thinsp;’&thinsp;
-        <StyledCol10Rem>
-          <StyledNumberInput
-            field={withNameSpace(field, 'longitude.seconds')}
-            onFocus={e => e.target.select()}
-            displayErrorTooltips
-          ></StyledNumberInput>
-        </StyledCol10Rem>
-        &thinsp;”&thinsp;
-        <Col xs="auto">
-          <StyledSelect
-            field={withNameSpace(field, 'longitude.direction')}
-            options={[
-              { label: 'W', value: DmsDirection.W },
-              { label: 'E', value: DmsDirection.E },
-            ]}
-          ></StyledSelect>
-        </Col>
-      </Form.Row>
-    </Container>
+    <StyledOuterRow
+      noGutters
+      className={clsx('d-flex', 'align-items-center', 'colum-gap-2', innerClassName)}
+    >
+      <Col xs={6}>
+        <StyledInnerRow>
+          <Col xs="auto" className="lat-lng-label">
+            Lat:
+          </Col>
+          <Col>
+            <StyledNumberInput
+              className="dms-degree-input"
+              field={withNameSpace(field, 'latitude.degrees')}
+              onFocus={e => e.target.select()}
+              displayErrorTooltips
+            ></StyledNumberInput>
+          </Col>
+          °
+          <Col>
+            <StyledNumberInput
+              className="dms-input"
+              field={withNameSpace(field, 'latitude.minutes')}
+              onFocus={e => e.target.select()}
+              displayErrorTooltips
+            ></StyledNumberInput>
+          </Col>
+          ’
+          <Col>
+            <StyledNumberInput
+              className="dms-input"
+              field={withNameSpace(field, 'latitude.seconds')}
+              onFocus={e => e.target.select()}
+              displayErrorTooltips
+            ></StyledNumberInput>
+          </Col>
+          ”
+          <Col xs="auto">
+            <StyledSelect
+              field={withNameSpace(field, 'latitude.direction')}
+              options={[
+                { label: 'N', value: DmsDirection.N },
+                { label: 'S', value: DmsDirection.S },
+              ]}
+            ></StyledSelect>
+          </Col>
+        </StyledInnerRow>
+      </Col>
+      <Col xs={6}>
+        <StyledInnerRow>
+          <Col xs="auto" className="lat-lng-label">
+            Long:
+          </Col>
+          <Col>
+            <StyledNumberInput
+              className="dms-degree-input"
+              field={withNameSpace(field, 'longitude.degrees')}
+              onFocus={e => e.target.select()}
+              displayErrorTooltips
+            ></StyledNumberInput>
+          </Col>
+          °
+          <Col>
+            <StyledNumberInput
+              className="dms-input"
+              field={withNameSpace(field, 'longitude.minutes')}
+              onFocus={e => e.target.select()}
+              displayErrorTooltips
+            ></StyledNumberInput>
+          </Col>
+          ’
+          <Col>
+            <StyledNumberInput
+              className="dms-input"
+              field={withNameSpace(field, 'longitude.seconds')}
+              onFocus={e => e.target.select()}
+              displayErrorTooltips
+            ></StyledNumberInput>
+          </Col>
+          ”
+          <Col xs="auto">
+            <StyledSelect
+              field={withNameSpace(field, 'longitude.direction')}
+              options={[
+                { label: 'W', value: DmsDirection.W },
+                { label: 'E', value: DmsDirection.E },
+              ]}
+            ></StyledSelect>
+          </Col>
+        </StyledInnerRow>
+      </Col>
+    </StyledOuterRow>
   );
 };
 
@@ -99,13 +121,37 @@ const StyledSelect = styled(Select)`
 const StyledNumberInput = styled(NumberInput)`
   && .form-control {
     border-radius: 0.4rem;
+    &.is-invalid {
+      background-image: none;
+      padding-right: 1.2rem !important;
+    }
   }
 `;
 
-const StyledCol9Rem = styled(Col)`
-  max-width: 9rem;
+const StyledOuterRow = styled(Row)`
+  padding: 0;
+  .dms-input {
+    min-width: 4rem;
+    max-width: 4rem;
+  }
+  .dms-degree-input {
+    min-width: 5rem;
+    max-width: 5rem;
+  }
+  .lat-lng-label {
+    min-width: 6rem;
+    max-width: 6rem;
+  }
 `;
 
-const StyledCol10Rem = styled(Col)`
-  max-width: 10rem;
+const StyledInnerRow = styled(Row)`
+  margin-right: 0;
+  margin-left: 0;
+  flex-wrap: nowrap;
+
+  > .col,
+  > [class*='col-'] {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
 `;
diff --git a/source/frontend/src/features/properties/filter/PropertyFilter.tsx b/source/frontend/src/features/properties/filter/PropertyFilter.tsx
index b6d88cddee..9772e861be 100644
--- a/source/frontend/src/features/properties/filter/PropertyFilter.tsx
+++ b/source/frontend/src/features/properties/filter/PropertyFilter.tsx
@@ -1,6 +1,7 @@
 import { Formik } from 'formik';
 import { Feature, Geometry } from 'geojson';
 import React, { useMemo } from 'react';
+import { Row } from 'react-bootstrap';
 import Col from 'react-bootstrap/Col';
 import { useHistory } from 'react-router';
 import { toast } from 'react-toastify';
@@ -113,7 +114,7 @@ export const PropertyFilter: React.FC<React.PropsWithChildren<IPropertyFilterPro
     >
       {({ isSubmitting, setFieldValue, values, resetForm, isValid }) => (
         <Form>
-          <Form.Row className="map-filter-bar pb-4">
+          <Row className="map-filter-bar pb-4">
             <Col xs="auto">
               <span>Search:</span>
             </Col>
@@ -139,9 +140,7 @@ export const PropertyFilter: React.FC<React.PropsWithChildren<IPropertyFilterPro
               />
             </NoRightPaddingColumn>
             <StyledCol
-              xs="3"
-              md="2"
-              lg={values.searchBy === 'coordinates' ? 'auto' : 4}
+              xs={values.searchBy === 'coordinates' ? 'auto' : 4}
               xl={values.searchBy === 'coordinates' ? 'auto' : 3}
             >
               {values.searchBy === 'pid' && (
@@ -210,7 +209,10 @@ export const PropertyFilter: React.FC<React.PropsWithChildren<IPropertyFilterPro
                 />
               )}
               {values.searchBy === 'coordinates' && (
-                <CoordinateSearchForm field="coordinates"></CoordinateSearchForm>
+                <CoordinateSearchForm
+                  field="coordinates"
+                  innerClassName="flex-nowrap"
+                ></CoordinateSearchForm>
               )}
             </StyledCol>
             <Col xs="auto">
@@ -248,7 +250,7 @@ export const PropertyFilter: React.FC<React.PropsWithChildren<IPropertyFilterPro
                 toggle={toggle}
               />
             </Col>
-          </Form.Row>
+          </Row>
         </Form>
       )}
     </Formik>
diff --git a/source/frontend/src/features/properties/filter/__snapshots__/PropertyFilter.test.tsx.snap b/source/frontend/src/features/properties/filter/__snapshots__/PropertyFilter.test.tsx.snap
index 984e2c9461..bf6eeeab92 100644
--- a/source/frontend/src/features/properties/filter/__snapshots__/PropertyFilter.test.tsx.snap
+++ b/source/frontend/src/features/properties/filter/__snapshots__/PropertyFilter.test.tsx.snap
@@ -297,7 +297,7 @@ exports[`MapFilterBar > renders correctly 1`] = `
     novalidate=""
   >
     <div
-      class="map-filter-bar pb-4 form-row"
+      class="map-filter-bar pb-4 row"
     >
       <div
         class="col-auto"
@@ -370,7 +370,7 @@ exports[`MapFilterBar > renders correctly 1`] = `
         </div>
       </div>
       <div
-        class="c2 col-xl-3 col-lg-4 col-md-2 col-3"
+        class="c2 col-xl-3 col-4"
       >
         <div
           class="input form-group"
diff --git a/source/frontend/src/features/properties/list/__snapshots__/PropertyListView.test.tsx.snap b/source/frontend/src/features/properties/list/__snapshots__/PropertyListView.test.tsx.snap
index 3d064d00cd..f0bf19b8b4 100644
--- a/source/frontend/src/features/properties/list/__snapshots__/PropertyListView.test.tsx.snap
+++ b/source/frontend/src/features/properties/list/__snapshots__/PropertyListView.test.tsx.snap
@@ -437,7 +437,7 @@ exports[`Property list view > matches snapshot 1`] = `
           novalidate=""
         >
           <div
-            class="map-filter-bar pb-4 form-row"
+            class="map-filter-bar pb-4 row"
           >
             <div
               class="col-auto"
@@ -496,7 +496,7 @@ exports[`Property list view > matches snapshot 1`] = `
               </div>
             </div>
             <div
-              class="c3 col-xl-3 col-lg-4 col-md-2 col-3"
+              class="c3 col-xl-3 col-4"
             >
               <div
                 class="input form-group"
diff --git a/source/frontend/src/hooks/repositories/mapLayer/useFullyAttributedParcelMapLayer.ts b/source/frontend/src/hooks/repositories/mapLayer/useFullyAttributedParcelMapLayer.ts
index 5b2da64f64..0fe7afe885 100644
--- a/source/frontend/src/hooks/repositories/mapLayer/useFullyAttributedParcelMapLayer.ts
+++ b/source/frontend/src/hooks/repositories/mapLayer/useFullyAttributedParcelMapLayer.ts
@@ -22,7 +22,11 @@ export const useFullyAttributedParcelMapLayer = () => {
     withCredentials: true,
   });
 
-  const { findOneWhereContains } = useLayerQuery(fullyAttributedParcelsLayerUrl, false, true);
+  const { findOneWhereContains, findMultipleWhereContainsWrapped } = useLayerQuery(
+    fullyAttributedParcelsLayerUrl,
+    false,
+    true,
+  );
 
   const { execute: getAllFeatures, loading: getAllFeaturesLoading } = getAllFeaturesWrapper;
 
@@ -125,6 +129,22 @@ export const useFullyAttributedParcelMapLayer = () => {
     [findOneWhereContains, handleError],
   );
 
+  const findMany = useCallback(
+    async (latlng: LatLngLiteral, geometryName?: string, spatialReferenceId?: number) => {
+      try {
+        return (await findMultipleWhereContainsWrapped.execute(
+          latlng,
+          geometryName,
+          spatialReferenceId,
+        )) as FeatureCollection<Geometry, PMBC_FullyAttributed_Feature_Properties>;
+      } catch (e: unknown) {
+        handleError();
+        return undefined;
+      }
+    },
+    [findMultipleWhereContainsWrapped, handleError],
+  );
+
   return {
     findByLegalDescription,
     findByPid,
@@ -133,5 +153,7 @@ export const useFullyAttributedParcelMapLayer = () => {
     findByLoading: getAllFeaturesLoading,
     findByWrapper: getAllFeaturesWrapper,
     findOne,
+    findMany,
+    findManyLoading: findMultipleWhereContainsWrapped.loading,
   };
 };
diff --git a/source/frontend/src/setupTests.ts b/source/frontend/src/setupTests.ts
index 4ebd1587ef..613cb482c0 100644
--- a/source/frontend/src/setupTests.ts
+++ b/source/frontend/src/setupTests.ts
@@ -18,6 +18,7 @@ import { cleanup } from './utils/test-utils';
 if (typeof global.URL.createObjectURL === 'undefined') {
   global.URL.createObjectURL = vi.fn();
 }
+global.innerWidth = 1920;
 
 // workaround to allow polyline and other svg map renderers to function correctly in tests.
 const createElementNSOrig = (global as any).document.createElementNS;


Reviews:
user: login: asanchezr
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-15T00:49:44Z
user: login: asanchezr
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-15T00:53:46Z
user: login: asanchezr
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-15T02:34:06Z
user: login: asanchezr
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-15T02:39:20Z

Review comments:
diff_hunk: @@ -1,5 +1,6 @@
-import { Col, Container, Form } from 'react-bootstrap';
+import { Col, Row } from 'react-bootstrap';
 import styled from 'styled-components';
+import { clsx } from 'yet-another-react-lightbox';
path: source/frontend/src/features/properties/filter/CoordinateSearch/CoordinateSearchForm.tsx
user: login: asanchezr
body: I'm not sure this is the proper import. I believe we use `import clsx from 'classnames';`
created_at: 2025-04-15T00:49:44Z
author_association: COLLABORATOR
diff_hunk: @@ -18,6 +18,7 @@ import { cleanup } from './utils/test-utils';
 if (typeof global.URL.createObjectURL === 'undefined') {
   global.URL.createObjectURL = vi.fn();
 }
+global.innerWidth = 1920;
path: source/frontend/src/setupTests.ts
user: login: asanchezr
body: ?
created_at: 2025-04-15T02:34:06Z
author_association: COLLABORATOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-04-15T02:28:10Z
body: ## [![Quality Gate Failed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-failed-20px.png 'Quality Gate Failed')](https://sonarcloud.io/dashboard?id=bcgov_PSP&pullRequest=4734) **Quality Gate failed**  
Failed conditions  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/failed-16px.png '') [15.2% Duplication on New Code](https://sonarcloud.io/component_measures?id=bcgov_PSP&pullRequest=4734&metric=new_duplicated_lines_density&view=list) (required ≤ 3%)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=bcgov_PSP&pullRequest=4734)


author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-15T02:36:41Z
body: See CodeCov Report Here: https://app.codecov.io/github/bcgov/psp/pull/4734
author_association: CONTRIBUTOR