fix: Nuxt3 upgrades UI fixes & improvements (#5589)

frontend/components/global/AutoForm.vue

@@ -10,7 +10,6 @@
       <v-col
         v-for="(inputField, index) in items"
         :key="index"
-        class="py-0"
         cols="12"
         sm="12"
       >
@@ -75,7 +74,6 @@
           :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
           variant="solo-filled"
           flat
-          class="rounded-lg"
           rows="3"
           auto-grow
           density="comfortable"
@@ -95,7 +93,6 @@
           :disabled="(inputField.disableUpdate && updateMode) || (!updateMode && inputField.disableCreate) || (disabledFields && disabledFields.includes(inputField.varName))"
           variant="solo-filled"
           flat
-          class="rounded-lg"
           :prepend-icon="inputField.icons ? modelValue[inputField.varName] : null"
           :label="inputField.label"
           :name="inputField.varName"

frontend/components/global/BaseCardSectionTitle.vue

@@ -10,6 +10,7 @@
     <v-card-title class="text-h5 pl-0 py-0" style="font-weight: normal;">
       <v-icon
         v-if="icon"
+        size="small"
         start
       >
         {{ icon }}
@@ -24,7 +25,7 @@
         <slot />
       </p>
     </v-card-text>
-    <v-divider class="mb-3" />
+    <v-divider class="mt-1 mb-3" />
   </v-card>
 </template>
 

frontend/components/global/BaseDialog.vue

@@ -29,7 +29,6 @@
           <v-toolbar-title class="headline">
             {{ title }}
           </v-toolbar-title>
-          <v-spacer />
         </v-toolbar>
         <v-progress-linear
           v-if="loading"

frontend/components/global/BaseWizard.vue

@@ -10,7 +10,7 @@
           style="margin-bottom: 4rem"
           dark
         >
-          <v-toolbar-title class="headline text-h4">
+          <v-toolbar-title class="headline text-h4 text-center mx-0">
             Mealie
           </v-toolbar-title>
         </v-toolbar>

frontend/components/global/InputQuantity.vue

@@ -10,7 +10,6 @@
       :min="min"
       :max="max"
       type="number"
-      class="rounded-xl"
       size="small"
       variant="plain"
     />