[mirotalk] - make chat & caption resizable

public/css/client.css

@@ -45,6 +45,7 @@
     --msger-left: 50%;
     --msger-height: 680px;
     --msger-width: 420px;
+    --msger-bubble-width: 55%;
 
     /* video iframe */
     --iframe-width: 640px;
@@ -241,19 +242,23 @@ body {
     background: var(--msger-bg);
     border: var(--border);
     /* text-align: justify; */
+    resize: both;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: var(--box-shadow);
 }
 
+.msger-draggable: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);
 }
 
@@ -336,18 +341,25 @@ body {
     background: var(--left-msg-bg);
     border-bottom-left-radius: 0;
     color: #fff;
+    width: var(--msger-bubble-width);
 }
 
 .left-msg .private-msg-bubble {
     background: var(--private-msg-bg);
     border-bottom-left-radius: 0;
     color: #fff;
+    width: var(--msger-bubble-width);
 }
 
 .left-msg .msg-caption-bubble {
     background: var(--left-msg-bg);
     border-bottom-left-radius: 0;
     color: #fff;
+    width: 90%;
+}
+
+.left-msg .msg-img {
+    margin: 0px 5px 5px 0px;
 }
 
 /* right side */
@@ -360,16 +372,18 @@ body {
     background: var(--right-msg-bg);
     border-bottom-right-radius: 0;
     color: #fff;
+    width: var(--msger-bubble-width);
 }
 
 .right-msg .private-msg-bubble {
     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;
 }
 
 /* common */
@@ -377,7 +391,6 @@ body {
 .msg-img {
     width: 50px;
     height: 50px;
-    margin-right: 10px;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
@@ -386,13 +399,12 @@ body {
 
 .private-msg-bubble,
 .msg-bubble {
-    max-width: 200px;
+    /* max-width: 200px; */
     padding: 15px;
     border-radius: 15px;
 }
 
 .msg-caption-bubble {
-    max-width: 70%;
     padding: 15px;
     border-radius: 15px;
 }
@@ -899,7 +911,7 @@ progress {
     width: 170px;
     height: 40px;
     font-size: 1.2rem;
-    background: linear-gradient(100deg, #376df9 0, #ff5fa0 75%, #ffc55a 100%);
+    background: linear-gradient(100deg, #376df9 0, #ff5fa0 var(--msger-bubble-width), #ffc55a 100%);
     box-shadow: 0 0 6px 0 rgb(251 255 0 / 82%);
     color: #ffffff;
     transition: background 0.23s;