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

src/components/Join.vue

@@ -22,20 +22,41 @@
 
         <v-row v-if="canEditProfile">
           <v-col cols="10" sm="7" class="py-0">
-            <v-select ref="avatar" :items="availableAvatars" variant="outlined" dense @change="selectAvatar"
-              :value="selectedProfile" single-line autofocus>
-              <template v-slot:selection>
-                <v-text-field background-color="transparent" variant="solo" flat hide-details
-                  @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-select>
+              <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
+                    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="{ 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-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')"
               @change="onRememberMe" />
           </v-col>
@@ -59,7 +80,7 @@
         </v-row>
 
         <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>
@@ -117,7 +138,7 @@
   </div>
 
   <!-- Loading indicator -->
-  <v-container v-else fluid fill-height class="loading-indicator transparent">
+  <v-container v-else fluid class="loading-indicator transparent fill-height">
     <v-row align="center" justify="center">
       <v-col class="text-center">
         <interactive-auth ref="interactiveAuth" v-if="waitingForRoomCreation" />
@@ -454,4 +475,9 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/join.scss";
+
+.avatar-select-control .v-select__selection {
+  flex-basis: 100%;
+}
+
 </style>