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

@@ -152,7 +152,7 @@ watch(() => appStore.openSidebars, () => {
 
 <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>
@@ -189,7 +189,7 @@ watch(() => appStore.openSidebars, () => {
 
 .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

@@ -260,10 +260,10 @@ const swiperColor = computed(() => {
             class="map"
         />
 
-        <div id="map-tooltip" ref="tooltip" class="tooltip pa-0">
+        <div id="map-tooltip" ref="tooltip" class="tooltip">
         <MapTooltip />
         </div>
-        <div id="map-tooltip" ref="compareTooltip" class="tooltip pa-0">
+        <div id="map-tooltip" ref="compareTooltip" class="tooltip">
         <MapTooltip compare-map />
         </div>
     </div>
@@ -300,7 +300,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

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

web/src/components/sidebars/ColormapEditor.vue

@@ -277,7 +277,8 @@ onMounted(init)
                         <template v-slot:activator="{ props }">
                             <div
                                 v-bind="props"
-                                class="color-square ma-0"
+                                class="color-square"
+                                style="margin: 0"
                                 :style="{backgroundColor: marker.color}"
                             />
                         </template>

web/src/components/sidebars/CompareLayerStyle.vue

@@ -212,7 +212,7 @@ const panels = ref(['A', 'B'] as const);
                                         @update:model-value="selectStyle($event, panel)"
                                     ></v-select>
                                 </div>
-                                <table class="aligned-controls px-2">
+                                <table class="aligned-controls">
                                     <tbody>
                                         <tr>
                                             <td><v-label color="primary-text">Opacity</v-label></td>
@@ -254,7 +254,7 @@ const panels = ref(['A', 'B'] as const);
                                             @update:model-value="selectStyle($event, panel)"
                                         ></v-select>
                                     </div>
-                                    <table class="aligned-controls px-2">
+                                    <table class="aligned-controls">
                                         <tbody>
                                             <tr>
                                                 <td><v-label color="primary-text">Opacity</v-label></td>
@@ -286,7 +286,7 @@ const panels = ref(['A', 'B'] as const);
     font-size: 14px;
 }
 .aligned-controls {
-    padding: 0px;
+    padding: 0 8px;
     width: 100%;
 }
 .aligned-controls td {

web/src/components/sidebars/LayerStyle.vue

@@ -573,7 +573,7 @@ onMounted(resetCurrentStyle)
                     />
                 </div>
 
-                <table class="aligned-controls px-2">
+                <table class="aligned-controls">
                     <tbody>
                         <tr v-if="frames.length > 1">
                             <td><v-label>Default Frame</v-label></td>
@@ -1595,7 +1595,7 @@ onMounted(resetCurrentStyle)
     font-size: 14px;
 }
 .aligned-controls {
-    padding: 0px;
+    padding: 0 8px;
     width: 100%;
 }
 .aligned-controls td {