From b33d73fff8b43b8f2536c158faabce94994c3b0f Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 5 Nov 2023 11:13:42 +0200
Subject: [PATCH] UX: make room type selection responsive

---
 src/assets/css/chat.scss      | 16 +++++++++-------
 src/components/CreateRoom.vue | 12 ++++++++----
 src/components/RoomInfo.vue   | 12 ++++++++----
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 21593de..fa9ff02 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -1018,13 +1018,15 @@ body {
   & > *:last-child {
     flex: 0 0 auto;
   }
-  .option-title {
-    color: #000;
-    font-size: 16 * $chat-text-size;
-  }
-  .option-text {
-    font-size: 13 * $chat-text-size;
-  }
+}
+
+.option-text {
+  font-size: 13 * $chat-text-size;
+}
+
+.option-title {
+  color: #000;
+  font-size: 16 * $chat-text-size;
 }
 
 .header-button-left {
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 1660cc4..64e9818 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -65,11 +65,15 @@
             </v-card>
 
             <v-card v-if="availableRoomTypes.length > 1" v-show="showOptions" class="room-option account ma-0" flat>
-              <v-card-text class="with-right-label">
-                <div>
-                  <div class="option-title">{{ $t('room_info.room_type') }}</div>
+              <v-card-text>
+                <div class="d-flex flex-wrap text-left">
+                  <div class="col-12 col-md-6 mr-auto pa-0">
+                    <div class="option-title">{{ $t('room_info.room_type') }}</div>
+                  </div>
+                  <div class="col-12 col-md-6 pa-0">
+                    <RoomTypeSelector v-model="roomType" />
+                  </div>
                 </div>
-                <RoomTypeSelector v-model="roomType" />
               </v-card-text>
             </v-card>
             <v-card v-if="$config.experimental_read_only_room" v-show="showOptions" class="room-option account ma-0" flat>
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 8fc0fa3..9b31d66 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -140,11 +140,15 @@
 
     <v-card class="account ma-3" flat v-if="(iAmAdmin() && availableRoomTypes.length > 1) || canChangeReadOnly()">
       <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" v-if="iAmAdmin() && availableRoomTypes.length > 1">
-        <div>
-          <div class="option-title">{{ $t('room_info.room_type') }}</div>
+      <v-card-text v-if="iAmAdmin() && availableRoomTypes.length > 1">
+        <div class="d-flex flex-wrap">
+          <div class="col-12 col-md-6 mr-auto pa-0">
+            <div class="option-title">{{ $t('room_info.room_type') }}</div>
+          </div>
+          <div class="col-12 col-md-6 pa-0">
+            <RoomTypeSelector v-model="roomType" />
+          </div>
         </div>
-        <RoomTypeSelector v-model="roomType" />
       </v-card-text>
       <v-card-text class="with-right-label" v-if="canChangeReadOnly()">
         <div>