Room details: Message history UX improvement

src/components/RoomInfo.vue

@@ -138,6 +138,36 @@
       </v-card-text>
     </v-card>
 
+    <v-card class="account ma-3" flat>
+      <v-card-title class="h2">{{ $t("room_info.message_retention") }}</v-card-title>
+      <v-card-text v-if="canViewRetentionPolicy">
+        <v-list v-if="canChangeRetentionPolicy">
+          <v-list-item link v-on:click="showMessageRetentionDialog = true" class="px-0">
+            <v-list-item-avatar class="mr-0 pb-0 mb-0">
+              <v-img
+                contain
+                width="24"
+                height="24"
+                src="@/assets/icons/timer.svg"
+              />
+            </v-list-item-avatar>
+            <v-list-item-content class="pb-0">
+              {{ messageRetention }}
+            </v-list-item-content>
+
+            <v-list-item-action class="pb-0 mb-0">
+              <v-icon>arrow_drop_down</v-icon>
+            </v-list-item-action>
+          </v-list-item>
+          <hr />
+        </v-list>
+        <div>
+          {{ $t("room_info.message_retention_info") }}
+        </div>
+      </v-card-text>
+
+    </v-card>
+
     <v-card class="account ma-3" flat v-if="(iAmAdmin() && availableRoomTypes.length > 1) || canChangeReadOnly() || canViewRetentionPolicy">
       <v-card-title class="h2 with-right-label"><div>{{ $t("room_info.experimental_features") }}</div><div></div></v-card-title>
       <v-card-text v-if="iAmAdmin() && availableRoomTypes.length > 1">
@@ -159,14 +189,6 @@
         v-model="readOnlyRoom"
       ></v-switch>
       </v-card-text>
-      <v-card-text class="with-right-label" style="align-items:center" v-if="canViewRetentionPolicy">
-        <div>
-          <div class="option-title">{{ $t('room_info.message_retention') }}</div>
-          <div class="option-text">{{ $t('room_info.message_retention_info') }}</div>
-        </div>
-        <div class="text-right">{{ messageRetention }}</div> 
-        <v-btn v-on:click="showMessageRetentionDialog = true" v-if="canChangeRetentionPolicy" icon size="x-small"><v-icon color="black">edit</v-icon></v-btn>
-      </v-card-text>
     </v-card>
 
     <v-card class="members ma-3" flat>
@@ -273,6 +295,7 @@
       :show="showMessageRetentionDialog"
       :room="room"
       @close="showMessageRetentionDialog = false"
+      v-on:message-retention-update="onMessageRetention"
     />
 
     <RoomExport :room="room" v-if="exporting" v-on:close="exporting = false" />
@@ -420,6 +443,10 @@ export default {
   },
 
   methods: {
+    onMessageRetention(retention){
+      const retentionPeriodsFound = this.retentionPeriods.find(rp => rp.value===retention)
+      this.messageRetention = retentionPeriodsFound.text
+    },
     onEvent(event) {
       if (this.room && this.room.roomId == event.getRoomId()) {
         // For this room