Fix wording and layout of voice mode settings

src/assets/css/chat.scss

@@ -894,6 +894,26 @@ body {
 
     text-decoration: underline;
   }
+
+  .with-right-label {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    text-align: start;
+    & > * {
+      flex: 1 1 auto;
+    }
+    & > *:last-child {
+      flex: 0 0 auto;
+    }
+    .option-title {
+      color: #000;
+      font-size: 16 * $chat-text-size;
+    }
+    .option-text {
+      font-size: 13 * $chat-text-size;
+    }
+  }
 }
 
 .header-button-left {

src/assets/translations/en.json

@@ -243,8 +243,9 @@
     "export_room": "Export chat",
     "user_admin": "Administrator",
     "user_moderator": "Moderator",
-    "ui_options": "UI Options",
-    "audio_layout": "Use audio layout"
+    "experimental_features": "Experimental Features",
+    "voice_mode": "Voice mode",
+    "voice_mode_info": "Switches the chat interface to a 'listen and record' mode"
   },
   "room_info_sheet": {
     "this_room": "This room",

src/components/Chat.vue

@@ -527,7 +527,7 @@ export default {
         if (this.room) {
           const tags = this.room.tags;
           if (tags && tags["ui_options"]) {
-            return tags["ui_options"]["audio_layout"] === 1;
+            return tags["ui_options"]["voice_mode"] === 1;
           }
         }
         return false;

src/components/RoomInfo.vue

@@ -166,11 +166,14 @@
     </v-card>
 
     <v-card class="account ma-3" flat>
-      <v-card-title class="h2">{{ $t("room_info.ui_options") }}</v-card-title>
-      <v-card-text>
+      <v-card-title class="h2 with-right-label"><div>{{ $t("room_info.experimental_features") }}</div><div></div></v-card-title>
+      <v-card-text class="with-right-label">
+        <div>
+          <div class="option-title">{{ $t('room_info.voice_mode') }}</div>
+          <div class="option-text">{{ $t('room_info.voice_mode_info') }}</div>
+        </div>
         <v-switch
         v-model="useAudioLayout"
-        :label="$t('room_info.audio_layout')"
       ></v-switch>
       </v-card-text>
     </v-card>
@@ -378,7 +381,7 @@ export default {
         if (this.room) {
           const tags = this.room.tags;
           if (tags && tags["ui_options"]) {
-            return tags["ui_options"]["audio_layout"] === 1;
+            return tags["ui_options"]["voice_mode"] === 1;
           }
         }
         return false;
@@ -386,7 +389,7 @@ export default {
       set: function (audioLayout) {
         if (this.room && this.room.tags) {
           let options = this.room.tags["ui_options"] || {}
-          options["audio_layout"] = (audioLayout ? 1 : 0);
+          options["voice_mode"] = (audioLayout ? 1 : 0);
           this.room.tags["ui_options"] = options;
           this.$matrix.matrixClient.setRoomTag(this.room.roomId, "ui_options", options);
         }
@@ -668,4 +671,5 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
+
 </style>