fill-height is now a class, dense is a density and fix all v-selects

src/components/CreateRoom.vue

@@ -76,18 +76,39 @@
           <v-row class="align-center">
             <v-col class="py-0">
               <div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
-              <v-select ref="avatar" :items="availableAvatars" variant="outlined" dense @change="selectAvatar"
-                :value="selectedProfile">
+              <v-select ref="avatar" 
+                :items="availableAvatars" 
+                variant="outlined" 
+                density="compact" 
+                @update:modelValue="selectAvatar"
+                :modelValue="selectedProfile"
+                item-props
+                item-value="id"
+                return-object
+                single-line
+                class="avatar-select-control"
+                >
                 <template v-slot:selection>
-                  <v-text-field background-color="transparent" variant="solo" flat hide-details
+                  <v-text-field 
+                    background-color="transparent" 
+                    variant="solo" 
+                    flat
+                    density="compact"
+                    hide-details
+                    @keydown="$event.stopPropagation()"
+                    @keypress="$event.stopPropagation()"
+                    @keyup="$event.stopPropagation()"
                     @click.stop="(event) => event.target.focus()" @focus="$event.target.select()"
                     v-model="selectedProfile.name"></v-text-field>
                 </template>
-                <template v-slot:item="data">
-                  <v-avatar size="32">
-                    <v-img :src="data.item.image" />
-                  </v-avatar>
-                  <div class="ms-2">{{ data.item.name }}</div>
+                 <template v-slot:item="{ props }">
+                  <v-list-item v-bind="props">
+                    <template v-slot:prepend>
+                      <v-avatar size="32">
+                        <v-img :src="props.image" />
+                      </v-avatar>
+                    </template>
+                  </v-list-item>
                 </template>
               </v-select>
             </v-col>
@@ -106,7 +127,7 @@
           <v-row class="mt-0">
             <v-col class="py-0">
               <v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
-                <template slot="label">
+                <template v-slot:label>
                   <i18n-t keypath="join.accept_ua" tag="span">
                     <template v-slot:agreement>
                       <a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
@@ -151,7 +172,8 @@ export default {
       selectedProfile: {
         id: "",
         image: "",
-        name: ""
+        name: "",
+        title: "",
       },
       enterRoomDialog: false,
       selectRetentionDialog: false,
@@ -335,6 +357,7 @@ export default {
     },
 
     selectAvatar(value) {
+      console.log("SELECT AVATAR", value);
       this.selectedProfile = Object.assign({}, value); // Make a copy, so editing does not destroy data
     },
 
@@ -372,4 +395,8 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/create.scss";
+
+.avatar-select-control .v-select__selection {
+  flex-basis: 100%;
+}
 </style>