Added vaadin scroller

for mac os compatibility

plugins/plugins/core/components/plugins-css.js

@@ -6791,8 +6791,6 @@ export const qchatStyles = css`
         --_lumo-grid-border-color: var(--border);
         --_lumo-grid-secondary-border-color: var(--border2);
         --mdc-dialog-min-width: 750px;
-        scrollbar-width: thin;
-        scrollbar-color: #6a6c75 #a1a1a1;
     }
 
     paper-spinner-lite {
@@ -6824,7 +6822,7 @@ export const qchatStyles = css`
         float: left;
         height: 100vh;
         overflow-y: hidden;
-        border-right: 3px #ddd solid;
+        border-right: 2px #ddd solid;
     }
 
     .people-list .blockedusers {
@@ -6972,20 +6970,6 @@ export const qchatStyles = css`
         overflow-x: hidden;
     }
 
-    .people-list ul::-webkit-scrollbar-track {
-        background: #a1a1a1;
-    }
-
-    .people-list ul::-webkit-scrollbar {
-        width: 11px;
-    }
-
-    .people-list ul::-webkit-scrollbar-thumb {
-        background-color: #6a6c75;
-        border-radius: 6px;
-        border: 3px solid #a1a1a1;
-    }
-
     .chat {
         width: 80vw;
         height: 100vh;

plugins/plugins/core/q-chat/q-chat.src.js

@@ -24,6 +24,7 @@ import '@material/mwc-icon'
 import '@material/mwc-snackbar'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
 import '@vaadin/grid'
+import '@vaadin/scroller'
 import '@vaadin/tooltip'
 
 // Multi language support
@@ -149,9 +150,14 @@ class Chat extends LitElement {
 							</div>
 						</div>
 					</div>
-					<ul class="list">
-						${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
-					</ul>
+					<vaadin-scroller
+						scroll-direction="vertical"
+						style="border-bottom: 1px solid var(--lumo-contrast-20pct); padding: var(--lumo-space-s);"
+					>
+						<ul class="list">
+							${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
+						</ul>
+					</vaadin-scroller>
 				</div>
 				<div class="chat">
 					<div id="newMessageBar" class="new-message-bar hide-new-message-bar clearfix" @click=${() => this.scrollToBottom()}>