Improve list style

Author: JanisV

frontend/src/components/CoinListView.vue

@@ -130,9 +130,11 @@ const loadImage = async (index, coinId) => {
     <v-text-field
         v-model="searchVal"
         :label="i18n.global.t('Search')"
-        clearable
         @change="onChanged"
         @click:clear="onChanged"
+        clearable
+        density="comfortable"
+        hide-details
     />
   </v-container>
 

frontend/src/components/FilterItem.vue

@@ -30,6 +30,7 @@ const onFilterClear = async () => {
     @update:modelValue="onFilterChanged"
     return-object
     v-model:menu="isMenuOpen"
+    density="comfortable"
   >
     <template v-slot:prepend-item>
       <v-list-item :title="i18n.global.t('All')" @click="onFilterClear"></v-list-item>

frontend/src/components/SettingsView.vue

@@ -67,6 +67,8 @@ const handleThemeChange = (theme) => {
                 item-title="name"
                 item-value="lang"
                 @update:model-value="setLocale"
+                density="comfortable"
+                hide-details
             >
             </v-select>
           </v-list-item-action>
@@ -79,6 +81,8 @@ const handleThemeChange = (theme) => {
                 v-model="statusPresentation"
                 :items="statusItems"
                 :item-title="item => i18n.global.t(item.title)"
+                density="comfortable"
+                hide-details
             >
             </v-select>
           </v-list-item-action>
@@ -91,6 +95,8 @@ const handleThemeChange = (theme) => {
                 v-model="imagePresentation"
                 :items="imageViewItems"
                 :item-title="item => i18n.global.t(item.title)"
+                density="comfortable"
+                hide-details
             >
             </v-select>
           </v-list-item-action>

frontend/src/components/SortItem.vue

@@ -16,13 +16,14 @@ const onChanged = async (val) => {
     <v-col class="mr-4">
       <v-select
         v-model="sortedBy"
-        hide-details
         :items="fields"
         :label="i18n.global.t('Sort by')"
         :item-title="item => settings.fields[item]"
         @update:modelValue="onChanged"
         return-object
         clearable
+        density="comfortable"
+        hide-details
       ></v-select>
     </v-col>