Changed all static inline style to CSS classes

src/assets/css/_utilities.scss

@@ -0,0 +1,20 @@
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.text-transform-0 {
+    text-transform: none;
+}
+
+.mt-40 {
+    margin-top: 40px;
+}
+.w-100 {
+    width: 100%;
+}
+.h-100 {
+    width: 100%;
+}
+.white-space-pre {
+    white-space: pre;
+}

src/assets/css/chat.scss

@@ -1,5 +1,6 @@
 @import '~vuetify/src/styles/settings/_variables.scss';
 @import "@/assets/css/main.scss";
+@import "@/assets/css/vendors/v-emoji-picker";
 
 $admin-bg: black;
 $admin-fg: white;
@@ -37,6 +38,10 @@ $admin-fg: white;
         align-items: center;
         height: 100%;
     }
+    .chat-header-members, .chat-header-name {
+        overflow: hidden;
+        cursor: pointer;
+    }
     .num-members {
         font-family: "Inter", sans-serif;
         font-weight: 400;
@@ -116,6 +121,8 @@ $admin-fg: white;
         padding-left: $chat-standard-padding-s;
         padding-bottom: $chat-standard-padding-s;
         padding-right: $chat-standard-padding-s;
+        overflow: hidden auto;
+
         &::-webkit-scrollbar {
             width: 4px;
         }
@@ -246,6 +253,10 @@ $admin-fg: white;
     user-select: text;
 }
 
+.message-wrapper {
+    position: relative; user-select: none
+}
+
 .messageIn {
     margin: 8px;
     text-align: left;
@@ -544,9 +555,13 @@ $admin-fg: white;
         font-family: "Inter", sans-serif;
         font-weight: 400;
         font-size: 13 * $chat-text-size;
+        flex: 1 0 80px;
     }
     .play-progress {
         padding: 0px 10px;
+        flex: 1 1 100%;
+        height: 30px;
+
         .v-slider__thumb {
             display: none;
         }
@@ -794,6 +809,10 @@ $admin-fg: white;
         color: #3d6eff;
     }
 
+    .filled-button {
+        min-width: 180px !important;
+    }
+
     .v-card {
         background-color: white;
         border-radius: 20px;
@@ -909,6 +928,7 @@ $admin-fg: white;
 }
 
 .mic-button {
+    z-index: 10;
     background-color: transparent !important;
     &.waiting-for-long-tap {
         transition: background-color 0.5s;
@@ -931,6 +951,14 @@ $admin-fg: white;
     border-radius: 10px;
     background-color: black;
     overflow: hidden;
+
+    .will-cancel, .locked, .error {
+        position: absolute !important;
+        top: 0 ;
+        left: 0;
+        right: 0;
+        bottom: 0
+    }
     .will-cancel {
         background-color: #ff3300;
     }
@@ -1080,3 +1108,13 @@ $admin-fg: white;
 .recent-emoji {
     color: black;
 }
+
+.current-image-input-path {
+    max-height: 50vh;
+    background-color: #e2e2e2
+}
+
+.loading-indicator {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.2);
+}

src/assets/css/main.scss

@@ -1,4 +1,5 @@
 @import './variables';
+@import './utilities';
 
 @font-face {
     font-family: "Inter";

src/assets/css/vendors/_v-emoji-picker.scss

@@ -0,0 +1,4 @@
+#EmojiPicker {
+    width: 100%;
+    background-color: #ffffff;
+}