Fix for Vuetify 4

Author: JanisV

frontend/package-lock.json

@@ -19,7 +19,7 @@
     "vue": "^3.5.29",
     "vue-i18n": "^11.2.8",
     "vue-router": "^5.0.3",
-    "vuetify": "^4.0.0"
+    "vuetify": "^4.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.4",

frontend/package.json

@@ -49,9 +49,9 @@ onUnmounted(async () => {
 
   <v-container>
     <dl>
-      <v-row no-gutters>
+      <v-row density="compact">
         <v-col cols="12" md="6">
-          <v-row no-gutters>
+          <v-row density="compact">
             <dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['status'] }}</dt>
             <dd class="v-col-sm-9">
               <StatusItem :status="coinData[service.infoFieldIndex('status')]" :statuses="settings.statuses" statusPresentation="icon_text" class="font-weight-bold" />
@@ -130,7 +130,7 @@ onUnmounted(async () => {
         </v-col>
 
         <v-col cols="12" md="6">
-          <v-row no-gutters>
+          <v-row density="compact">
             <template v-if="coinData[service.infoFieldIndex('grade')]">
               <dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['grade'] }}</dt>
               <dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('grade')] }}</dd>

frontend/src/components/CoinView.vue

@@ -22,11 +22,11 @@ const onFilterChanged = async (val) => {
     density="comfortable"
   >
     <template v-slot:selection="{ item }" v-if="field === 'status'">
-      <StatusItem :status="item.raw" :statuses="settings.statuses" statusPresentation="icon_text" />
+      <StatusItem :status="item" :statuses="settings.statuses" statusPresentation="icon_text" />
     </template>
     <template v-slot:item="{ props, item }" v-if="field === 'status'">
       <v-list-item v-bind="props" title="">
-        <StatusItem :status="item.raw" :statuses="settings.statuses" statusPresentation="icon_text" />
+        <StatusItem :status="item" :statuses="settings.statuses" statusPresentation="icon_text" />
       </v-list-item>
     </template>
   </v-select>

frontend/src/components/FilterItem.vue

@@ -12,7 +12,7 @@ const onChanged = async (val) => {
 </script>
 
 <template>
-  <v-row align="center" no-gutters v-if="fields.length > 0">
+  <v-row align="center" density="compact" v-if="fields.length > 0">
     <v-col class="mr-4">
       <v-select
         v-model="sortedBy"

frontend/src/components/SortItem.vue

@@ -11,18 +11,18 @@ const props = defineProps(['status', 'statuses', 'statusPresentation', 'class'])
     {{ statuses[status] }}
   </template>
   <template v-if="statusPresentation === 'icon_text'">
-    <v-row align="center" no-gutters>
+    <v-row align="center" density="compact">
       <v-col cols="auto">
         <v-img :src="`${status}.png`" width="16"></v-img>
       </v-col>
-      <v-col class="ps-2" :class="props.class">
+      <v-col :class="props.class">
         {{ statuses[status] }}
       </v-col>
     </v-row>
   </template>
   <template v-if="statusPresentation === 'text_icon'">
-    <v-row align="center" no-gutters>
-      <v-col class="pe-2" :class="props.class">
+    <v-row align="center" density="compact">
+      <v-col :class="props.class">
         {{ statuses[status] }}
       </v-col>
       <v-col cols="auto">