[mirotalksfu] - make chat resizable

public/css/Room.css

@@ -38,6 +38,7 @@
     --msger-left: 50%;
     --msger-height: 680px;
     --msger-width: 420px;
+    --msger-bubble-width: 55%;
     --msger-bg: radial-gradient(#393939, #000000);
     --wb-width: 800px;
     --wb-height: 600px;
@@ -274,17 +275,21 @@ body {
     border: var(--border);
     border-radius: 10px;
     box-shadow: var(--box-shadow);
+    resize: both;
     overflow: hidden;
 }
 
+.chat-room:active {
+    min-height: var(--msger-height);
+    min-width: var(--msger-width);
+}
+
 .msger {
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-flow: column wrap;
     justify-content: space-between;
-    top: var(--msger-top);
-    left: var(--msger-left);
-    height: var(--msger-height);
-    width: var(--msger-width);
     background: var(--msger-bg);
 }
 
@@ -353,12 +358,18 @@ body {
     background: var(--left-msg-bg);
     border-bottom-left-radius: 0;
     color: #fff;
+    width: var(--msger-bubble-width);
 }
 
 .left-msg .msg-bubble-private {
     background: var(--private-msg-bg);
     border-bottom-left-radius: 0;
     color: #fff;
+    width: var(--msger-bubble-width);
+}
+
+.left-msg .msg-img {
+    margin: 0px 5px 5px 0px;
 }
 
 /*--------------------------------------------------------------
@@ -373,16 +384,18 @@ body {
     background: var(--right-msg-bg);
     border-bottom-right-radius: 0;
     color: #fff;
+    width: var(--msger-bubble-width);
 }
 
 .right-msg .msg-bubble-private {
     background: var(--private-msg-bg);
     border-bottom-right-radius: 0;
     color: #fff;
+    width: var(--msger-bubble-width);
 }
 
 .right-msg .msg-img {
-    margin: 0 0 0 10px;
+    margin: 0px 0px 5px 5px;
 }
 
 /*--------------------------------------------------------------
@@ -392,7 +405,6 @@ body {
 .msg-img {
     width: 50px;
     height: 50px;
-    margin-right: 10px;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
@@ -400,7 +412,7 @@ body {
 
 .msg-bubble-private,
 .msg-bubble {
-    max-width: 200px;
+    /* max-width: 200px; */
     padding: 15px;
     border-radius: 15px;
 }

public/view/Room.html

@@ -346,8 +346,8 @@ access to use this app.
                 <header id="chatHeader" class="chat-header">
                     <div class="chat-header-title"><i class="fas fa-comment-alt"></i> Chat</div>
                     <div class="chat-header-options">
-                        <button id="chatCleanButton" class="fas fa-trash"></button>
                         <button id="chatSaveButton" class="fas fa-save"></button>
+                        <button id="chatCleanButton" class="fas fa-trash"></button>
                         <button id="chatCloseButton" class="fas fa-times"></button>
                     </div>
                 </header>