Added vaadin scroller

for mac os compatibility

package-lock.json

@@ -101,11 +101,12 @@
 				"@vaadin/grid": "24.2.9",
 				"@vaadin/icons": "24.2.9",
 				"@vaadin/password-field": "24.2.9",
+				"@vaadin/scroller": "24.2.9",
 				"@vaadin/tabs": "24.2.9",
 				"@vaadin/tabsheet": "24.2.9",
 				"@vaadin/tooltip": "24.2.9",
 				"@zip.js/zip.js": "2.7.44",
-				"axios": "1.6.8",
+				"axios": "1.7.1",
 				"electron": "30.0.6",
 				"electron-builder": "24.13.3",
 				"epml": "0.3.3",
@@ -4665,9 +4666,9 @@
 			}
 		},
 		"node_modules/axios": {
-			"version": "1.6.8",
+			"version": "1.7.1",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.1.tgz",
-			"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+			"integrity": "sha512-+LV37nQcd1EpFalkXksWNBiA17NZ5m5/WspmHGmZmdx1qBOg/VNq/c4eRJiA9VQQHBOs+N0ZhhdU10h2TyNK7Q==",
 			"dev": true,
 			"dependencies": {
 				"follow-redirects": "^1.15.6",

package.json

@@ -123,11 +123,12 @@
 		"@vaadin/grid": "24.2.9",
 		"@vaadin/icons": "24.2.9",
 		"@vaadin/password-field": "24.2.9",
+		"@vaadin/scroller": "24.2.9",
 		"@vaadin/tabs": "24.2.9",
 		"@vaadin/tabsheet": "24.2.9",
 		"@vaadin/tooltip": "24.2.9",
 		"@zip.js/zip.js": "2.7.44",
-		"axios": "1.6.8",
+		"axios": "1.7.1",
 		"electron": "30.0.6",
 		"electron-builder": "24.13.3",
 		"epml": "0.3.3",

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">
+					<vaadin-scroller
-						${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
+						scroll-direction="vertical"
-					</ul>
+						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()}>