Re-add scrollbars

frontend/src/assets/styles.css

@@ -80,14 +80,6 @@ img.emoji {
 .v-btn {
   text-transform: capitalize;
 }
-::-webkit-scrollbar {
-  display: none;
-}
-
-* {
-  -ms-overflow-style: none;
-  scrollbar-width: none; /* Firefox */
-}
 
 .troplo-nav {
   font-family: "Inter", sans-serif;
@@ -156,39 +148,28 @@ div .theme--dark.v-calendar-daily .v-calendar-daily__day {
   border: 1px transparent !important;
 }
 
-.light::-webkit-scrollbar {
-  width: 15px !important;
-}
-
-.light::-webkit-scrollbar-track {
-  background: #e6e6e6 !important;
-  border-left: 1px solid #dadada !important;
-}
-
-.light::-webkit-scrollbar-thumb {
-  background: #b0b0b0 !important;
-  border: solid 3px #e6e6e6 !important;
-  border-radius: 7px !important;
-}
-
-.light::-webkit-scrollbar-thumb:hover {
-  background: black !important;
-}
-
 ::-webkit-scrollbar {
-  width: 15px !important;
+  width: 10px !important;
 }
 
 ::-webkit-scrollbar-track {
-  background: #151515 !important;
+  background: transparent !important;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #3e3e3e !important;
-  border: solid 3px #202020 !important;
+  background: var(--v-text-lighten3) !important;
+  border: solid 3px var(--v-bg-base) !important;
   border-radius: 7px !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: white !important;
+  background: var(--v-text-lighten4) !important;
 }
+
+::-webkit-scrollbar-corner {
+  background-color: var(--v-bg-base);
+}
+
+:root {
+  overflow-y: auto !important;
+}

frontend/src/components/Message.vue

@@ -184,8 +184,6 @@
                         >
                           <v-progress-circular
                             indeterminate
-                            width="500"
-                            height="500"
                             color="grey lighten-5"
                           ></v-progress-circular>
                         </v-row>

frontend/src/views/Communications/CommunicationsChat.vue

@@ -4,7 +4,7 @@
       :position-x="$store.state.context.pins.x"
       :position-y="60"
       v-model="$store.state.context.pins.value"
-      class="rounded-l"
+      class="rounded-l elevation-7"
       absolute
       transition="scroll-y-transition"
       :close-on-content-click="false"
@@ -18,9 +18,9 @@
         </v-toolbar>
         <v-divider></v-divider>
         <v-container>
-          <v-list dense v-if="pins.length">
+          <v-list dense v-if="pins.length" :max-height="600">
             <v-list-item
-              @click.self="jumpToMessage(pin.message.id)"
+              @click="jumpToMessage(pin.message.id)"
               v-for="(pin, index) in pins"
               :key="index"
             >
@@ -30,7 +30,7 @@
                 :key="pin.message.keyId"
               ></SimpleMessage>
               <v-spacer></v-spacer>
-              <v-btn icon text @click="removePin(pin.messageId)">
+              <v-btn icon text @click.stop="removePin(pin.messageId)">
                 <v-icon> mdi-close </v-icon>
               </v-btn>
             </v-list-item>
@@ -228,7 +228,8 @@
                     messages[index - 1]?.createdAt,
                     'minute'
                   ) < 10 &&
-                  !message.replyId
+                  !message.replyId &&
+                  !message.type
                 "
               ></Message>
               <div