Fix MessageRetentionDialog

src/assets/css/main.scss

@@ -173,4 +173,12 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
 
 .v-card-title {
     display: flex;
+}
+
+.fluid-radio {
+    flex-direction: row-reverse;
+    margin-bottom: 0;
+    .v-label {
+        width: 100%;
+    }
 }

src/components/MessageRetentionDialog.vue

@@ -4,16 +4,14 @@
     class="ma-0 pa-0" 
     :width="$vuetify.display.smAndUp ? '688px' : '95%'">
     <div class="dialog-content text-center">
-      <template>
+      <h2 class="dialog-title">{{ $t("room_info.message_retention") }}</h2>
-        <h2>{{ $t("room_info.message_retention") }}</h2>
-      </template>
       <v-container fluid>
         <v-row cols="12">
           <v-col cols="12">
             <v-form v-model="isValid">
               <v-radio-group v-model="retention" class="my-0 py-0">
-                <v-radio active-class="radio-active" class="flex-row-reverse mb-0" v-for="p in retentionPeriods"
+                <v-radio active-class="radio-active" class="fluid-radio" v-for="p in retentionPeriods"
-                  :key="p.text" :label="p.text" :value="p.value" />
+                  :key="p.text" :label="p.text" :value="p.value" color="primary" />
               </v-radio-group>
             </v-form>
           </v-col>
@@ -55,6 +53,9 @@ export default {
     this.setInitialValue();
   },
   methods: {
+    shouldShow() {
+      return this.modelValue ? true : false;
+    },
     onOpenDialog() {  
       // Showing, reset
       this.setInitialValue();