Fix CSS layer conflicts for Vuetify 4 upgrade

Vuetify 3 utility classes used !important and won over component
styles. Vuetify 4 replaced !important with CSS layers, so unlayered
component styles now override them. Consolidate the utility class
values into the component CSS rules and remove the now-ineffective
utility classes from templates.

Author: brianhelba

web/src/components/map/LegacyMap.vue

@@ -162,7 +162,7 @@ watch(
 
 <template>
   <div id="mapContainer" class="map">
-    <div id="map-tooltip" ref="tooltip" class="tooltip pa-0">
+    <div id="map-tooltip" ref="tooltip" class="tooltip">
       <MapTooltip />
     </div>
   </div>
@@ -199,7 +199,7 @@ watch(
 
 .tooltip {
   border-radius: 5px;
-  padding: 10px 20px;
+  padding: 0;
   word-break: break-word;
   text-wrap: wrap;
   width: fit-content;

web/src/components/map/ToggleCompareMap.vue

@@ -321,7 +321,7 @@ const swiperColor = computed(() => {
 
 .tooltip {
   border-radius: 5px;
-  padding: 10px 20px;
+  padding: 0;
   word-break: break-word;
   text-wrap: wrap;
   width: fit-content;

web/src/components/projects/ProjectConfig.vue

@@ -240,7 +240,7 @@ watch(
 
 <template>
   <div>
-    <div class="project-row my-5">
+    <div class="project-row">
       <v-select
         placeholder="Select a Project"
         no-data-text="No available projects."
@@ -574,7 +574,7 @@ watch(
 <style>
 .project-row {
   display: flex;
-  margin: 0px 8px;
+  margin: 20px 8px;
   align-items: center;
   justify-content: space-between;
 }