simplify and composer design

front/src/views/room/RoomView.vue

@@ -49,50 +49,38 @@ provide("room", room);
 </script>
 
 <template>
-    <div id="main">
+    <div class="container">
         <Header :id="id" :room="room"></Header>
-        <div id="RoomViewBody">
-            <div class="content">
-                <Message
-                    v-for="(message, index) in store.getters.messages(room?.id)"
-                    :key="index"
-                    :msg="message"
-                    :members="room?.members"
-                    @open-message-view="(id) => openMessageView(id)"
-                />
-            </div>
-            <Composer class="composer" v-if="shouldDisplayComposer()" />
+        <div class="messages">
+            <Message
+                v-for="(message, index) in store.getters.messages(room?.id)"
+                :key="index"
+                :msg="message"
+                :members="room?.members"
+                @open-message-view="(id) => openMessageView(id)"
+            />
         </div>
+        <Composer class="composer" v-if="shouldDisplayComposer()" />
         <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
     </div>
 </template>
 
 <style scoped>
-#main {
+.container {
+    display: flex;
+    flex-direction: column;
     background-color: var(--primary-background);
     color: var(--primary-text);
+    height: 100vh;
     width: 100%;
 }
 
-#RoomViewBody {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+.messages {
+    flex-grow: 1;
 }
 
 .composer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding-top: 10px;
-
-    height: 35px;
-}
-
-.content {
     display: flex;
-    flex-direction: column-reverse;
-    overflow: auto;
-    margin-bottom: 60px;
+    align-items: center;
 }
 </style>