REFACTOR Optimize map.js, template refinements (#11)

dist/css/map.css

@@ -1,43 +1,71 @@
-/* Styling for the layout */
-.locations-map {
-  height: 500px;
+/* Container for map and location panel */
+.locations-container {
+  display: flex;
+  flex-wrap: wrap;
+  height: 600px; /* Set fixed height for the container */
 }
 
-.location-col {
-  height: 500px;
-  overflow-y: scroll;
+/* Map and location columns */
+.locations-container .locations-map,
+.locations-container .location-col {
+  flex: 1;
+  max-height: 600px; /* Ensure both the map and location list don't exceed this height */
 }
 
-.locations-panel {
-  overflow-y: auto;
+/* Adjust map height */
+.locations-map {
+  min-height: 600px;
+  height: 100%;
+  max-height: 600px; /* Prevent the map from growing too large */
 }
 
-.info-window {
-  margin-left: 20px;
-  margin-bottom: 20px;
+/* Make the location column take up all available space */
+.location-col {
+  display: flex;
+  flex-direction: column; /* Ensure children stack vertically */
+  height: 100%;
+  max-height: 600px;
 }
 
-/* Styling for Autocomplete search bar */
-#pac-input {
-  text-overflow: ellipsis;
+/* Sticky search panel with fixed height */
+.locations-search {
+  flex-shrink: 0;
+  background-color: #f8f9fa;
+  padding: 1rem;
 }
 
-#pac-input:focus {
-  border-color: #4d90fe;
+/* Scrollable panel for locations */
+.locations-panel {
+  flex-grow: 1; /* Allow the panel to grow and take up the remaining space */
+  overflow-y: auto;
 }
 
-/* Styling for the list of locations */
+/* Style for individual places in the list */
 .place {
-  margin-block-end: 0px;
+  margin-bottom: 0.5rem;
 }
 
 .place-address {
-  font-size: .75em;
-  margin-block-end: 0px;
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
 }
 
 .distanceText {
   color: #666;
-  font-size: .75em;
-  margin-block-end: 0px;
+  font-size: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.contact-directions {
+  margin-top: 10px;
+}
+
+/* Styling for the autocomplete search bar */
+#pac-input {
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+#pac-input:focus {
+  border-color: #4d90fe;
 }