Better RTL support on "create room" screen

src/components/CreateRoom.vue

@@ -34,13 +34,17 @@
       </v-row>
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <div class="text-left font-weight-light">{{ $t("new_room.name_room") }}</div>
+          <div class="text-start font-weight-light">{{ $t("new_room.name_room") }}</div>
           <v-text-field v-model="roomName" color="black" :rules="roomNamerules" counter="50" maxlength="50"
             background-color="white" v-on:keyup.enter="$refs.topic.focus()" :disabled="step > steps.INITIAL" autofocus
             solo @update:error="updateErrorState"></v-text-field>
-          <div class="text-left font-weight-light" v-show="roomName.length > 0">{{ $t("new_room.room_topic") }}</div>
+          <div class="text-start font-weight-light" v-show="roomName.length > 0">{{ $t("new_room.room_topic") }}</div>
-          <v-text-field v-model="roomTopic" v-show="roomName.length > 0" ref="topic" color="black" background-color="white"
+          <v-textarea v-model="roomTopic" v-show="roomName.length > 0" ref="topic" color="black" background-color="white"
-            v-on:keyup.enter="$refs.create.$el.focus()" :disabled="step > steps.INITIAL" solo></v-text-field>
+            v-on:keydown.enter.prevent="
+                () => {
+                  $refs.create.$el.focus()
+                }
+              " :disabled="step > steps.INITIAL" solo full-width auto-grow rows="1" no-resize hide-details></v-textarea>
 
           <!-- Our only option right now is voice mode, so if not enabled, hide the 'options' drop down as well -->
           <template v-if="$config.experimental_voice_mode || $config.experimental_read_only_room || $config.experimental_public_room">
@@ -102,7 +106,7 @@
         <v-container v-if="canEditProfile" class="pa-10">
           <v-row class="align-center">
             <v-col class="py-0">
-              <div class="text-left font-weight-bold">{{ $t("join.choose_name") }}</div>
+              <div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
               <v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
                 :value="availableAvatars[0]" single-line autofocus>
                 <template v-slot:selection>

src/components/InteractiveAuth.vue

@@ -8,7 +8,7 @@
     <v-container fluid class="mt-40" v-if="step == steps.ENTER_EMAIL">
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <div class="text-left font-weight-light">{{ $t("login.email") }}</div>
+          <div class="text-start font-weight-light">{{ $t("login.email") }}</div>
           <v-text-field v-model="email" color="black" :rules="emailRules" type="email" maxlength="200"
             background-color="white" v-on:keyup.enter="onEmailEntered(email)" autofocus solo></v-text-field>
           <v-btn :disabled="!emailIsValid" color="black" depressed class="filled-button"
@@ -22,7 +22,7 @@
     <v-container fluid class="mt-40" v-if="step == steps.TERMS">
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <div class="text-left font-weight-light">{{ $t("login.terms") }}</div>
+          <div class="text-start font-weight-light">{{ $t("login.terms") }}</div>
         </v-col>
       </v-row>
       <v-row cols="12" align="center" justify="center">
@@ -51,7 +51,7 @@
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
           <div>
-            <div class="text-left font-weight-light">{{ $t("login.sent_verification", { email: this.email }) }}</div>
+            <div class="text-start font-weight-light">{{ $t("login.sent_verification", { email: this.email }) }}</div>
             <v-progress-circular style="display: inline-flex" indeterminate color="primary"
               size="20"></v-progress-circular>
           </div>
@@ -65,7 +65,7 @@
     <v-container fluid class="mt-40" v-if="step == steps.ENTER_TOKEN">
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <div class="text-left font-weight-light">{{ $t("login.registration_token") }}</div>
+          <div class="text-start font-weight-light">{{ $t("login.registration_token") }}</div>
           <v-text-field v-model="token" color="black" :rules="tokenRules" type="text" maxlength="64"
             background-color="white" v-on:keyup.enter="onTokenEntered(token)" autofocus solo></v-text-field>
           <v-btn :disabled="!tokenIsValid" color="black" depressed class="filled-button"

src/components/Login.vue

@@ -15,7 +15,7 @@
           <v-col>
             <div class="room-name no-upper">{{ $t("login.title") }}</div>
           </v-col>
-          <v-col class="text-right">
+          <v-col class="text-end">
             <v-btn id="btn-close" text v-if="showCloseButton" @click.stop="$navigation.pop">
               <v-icon>close</v-icon>
             </v-btn>