Align Geolocate icon and Search

- align geolocate and search according to mock for desktop and mobile

client/src/components/J40Map.module.scss

@@ -3,61 +3,37 @@
 
 
 .j40Map {
+  // width < 1024
   @include at-media-max("desktop") {
-    // < 1024
     height: 55vh;
   }
 
   .mapHeaderRow{
     @include u-display("flex");
     @include u-padding-left(1.5);
+    justify-content: flex-start;
     
-    justify-content: space-between;
 
-    /* 
-      This width is set to prevent this row from 
-      overflowing. Using justify-content: space-between
-      will allow the geolocation button to be right 
-      ajusted. Without the width property constraint
-      of 98%, the space-between property forces the
-      geolocation icon out of the parent container.
-      
-      Since the geolocation control is absolutely
-      positioned, attempts were made to set the 
-      parent to be relative to avoid this, however
-      it seems that we haven't found a cleaner
-      solution (yet).
-    */
-    width: 98%;
-
-    
     .geolocateBox {
-      margin-top: 6px;
+      flex: 1 2 47%;
+      align-self: flex-end;
+      margin-bottom: 30px;
+      margin-left: 1rem;
 
       .geolocateMessage {
         visibility: visible;
         background-color: white;
         margin-bottom: 3px;
+        max-width: fit-content;
       }
       
       .geolocateMessageHide {
         visibility: hidden;
         margin-bottom: 3px;
       }
-      
-      @include at-media-max("tablet") {
-        // < 640
-        margin-top: 28px;
-      }
-      
-      @media (max-width: 365px){
-        margin-top: 46px;
 
-      }
       .geolocateIcon{
         align-self: flex-end;
-        @include u-margin-right(4);
-        
       }
     }
   }

client/src/components/MapSearch/MapSearch.module.scss

@@ -1,12 +1,27 @@
 @use '../../styles/design-system.scss' as *;
 
 .mapSearchContainer {
-    /*
-      The width of the container is being limited so that 
-      as the device width decreases, the geolocation 
-      button has enough space between the Search
-      component
-    */
-    width: 71%;
+  /**
+  Various breakpoint are being used to allow a consistent ratio 
+  of screen width between the search component and the geolocation 
+  component across all device sizes.
+  */
+
+  // width < 660
+  @include at-media-max("tablet") {
+    flex: 1 1 100%;
+  }
+
+  //  660 < width < 1024
+  @include at-media-max("desktop") {
+    @include at-media("tablet"){
+      flex: 1 1 56%;
+    }
+  }
+
+  // > 1024
+  @include at-media("desktop") {
+    flex: 1 1 72%;
+  }
 }
 

client/src/components/MapSearchMessage/MapSearchMessage.module.scss

@@ -11,6 +11,7 @@
 .showMessage {
     @include searchMessageLayout;
     display: block;
+    width: fit-content;
 }
 
 .hideMessage {