frontend: use custom scrollbars only on linux and windows

Changed to use native scrollbars on macOS and iOS.

Android does not use scrollbars (at lest from Android version 14).

Only keep custom scrollbar CSS for Linux and Windows.

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+- macOS: use native scrollbars
 
 # 4.46.0
 - Android: enable export logs feature

frontends/web/src/components/layout/main.module.css

@@ -1,4 +1,6 @@
 .main {
+    /* define background color so macOS renders native scrollbars with correct color */
+    background-color: var(--background);
     display: flex;
     flex-direction: column;
     flex-grow: 1;

frontends/web/src/style/base.css

@@ -37,15 +37,18 @@ h1, h2, h3, h4, h5 {
     line-height: 1.25;
 }
 
-::-webkit-scrollbar {
+.os-linux::-webkit-scrollbar,
+.os-windows::-webkit-scrollbar {
     background-color: transparent;
     width: 4px;
 }
-::-webkit-scrollbar-track {
+.os-linux::-webkit-scrollbar-track,
+.os-windows::-webkit-scrollbar-track {
     background-color: transparent;
 }
 
-::-webkit-scrollbar-thumb {
+.os-linux::-webkit-scrollbar-thumb,
+.os-windows::-webkit-scrollbar-thumb {
     background-color: var(--color-secondary);
 }