feat(Grid): enhance mobile scrollbar UX with 40px touch targets and themed colors (#9379)

tobiu · tobiu · commit 5874338d371b · 2026-03-07T19:07:58.000+01:00
diff --git a/resources/scss/src/grid/VerticalScrollbar.scss b/resources/scss/src/grid/VerticalScrollbar.scss
@@ -2,6 +2,7 @@
     bottom      : 1px;
     color-scheme: var(--grid-scrollbar-color-scheme, light);
     opacity     : 0;
+    overflow-x  : hidden;
     overflow-y  : scroll;
     position    : absolute;
     right       : 0;
@@ -15,7 +16,7 @@
     }
 
     .neo-grid-scrollbar-content {
-        width: 1px;
+        width: 10px;
     }
 }
 
@@ -28,10 +29,17 @@
 body.neo-has-touch {
     .neo-grid-vertical-scrollbar {
         opacity: 1;
-        width  : var(--grid-scrollbar-touch-width, 24px);
+        width  : var(--grid-scrollbar-touch-width, 40px);
 
         &::-webkit-scrollbar {
-            width: var(--grid-scrollbar-touch-width, 24px);
+            width: var(--grid-scrollbar-touch-width, 40px);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-clip : padding-box;
+            background-color: var(--grid-scrollbar-thumb-color, rgba(128, 128, 128, 0.5));
+            border          : 8px solid transparent;
+            border-radius   : 16px;
         }
     }
 }
diff --git a/resources/scss/theme-cyberpunk/grid/VerticalScrollbar.scss b/resources/scss/theme-cyberpunk/grid/VerticalScrollbar.scss
@@ -1,6 +1,6 @@
 :root .neo-theme-cyberpunk { // .neo-grid-vertical-scrollbar
     --grid-scrollbar-color-scheme: dark;
-    --grid-scrollbar-touch-width : 24px;
+    --grid-scrollbar-thumb-color : rgba(0, 255, 255, 0.4);
+    --grid-scrollbar-touch-width : 40px;
     --grid-scrollbar-width       : 16px;
 }
-
diff --git a/resources/scss/theme-dark/grid/VerticalScrollbar.scss b/resources/scss/theme-dark/grid/VerticalScrollbar.scss
@@ -1,6 +1,6 @@
 :root .neo-theme-dark { // .neo-grid-vertical-scrollbar
     --grid-scrollbar-color-scheme: dark;
-    --grid-scrollbar-touch-width : 24px;
+    --grid-scrollbar-thumb-color : rgba(255, 255, 255, 0.4);
+    --grid-scrollbar-touch-width : 40px;
     --grid-scrollbar-width       : 16px;
 }
-
diff --git a/resources/scss/theme-light/grid/VerticalScrollbar.scss b/resources/scss/theme-light/grid/VerticalScrollbar.scss
@@ -1,6 +1,6 @@
 :root .neo-theme-light { // .neo-grid-vertical-scrollbar
     --grid-scrollbar-color-scheme: light;
-    --grid-scrollbar-touch-width : 24px;
+    --grid-scrollbar-thumb-color : rgba(0, 0, 0, 0.4);
+    --grid-scrollbar-touch-width : 40px;
     --grid-scrollbar-width       : 16px;
 }
-
diff --git a/resources/scss/theme-neo-dark/grid/VerticalScrollbar.scss b/resources/scss/theme-neo-dark/grid/VerticalScrollbar.scss
@@ -1,6 +1,6 @@
 :root .neo-theme-neo-dark { // .neo-grid-vertical-scrollbar
     --grid-scrollbar-color-scheme: dark;
-    --grid-scrollbar-touch-width : 24px;
+    --grid-scrollbar-thumb-color : rgba(255, 255, 255, 0.4);
+    --grid-scrollbar-touch-width : 40px;
     --grid-scrollbar-width       : 16px;
 }
-
diff --git a/resources/scss/theme-neo-light/grid/VerticalScrollbar.scss b/resources/scss/theme-neo-light/grid/VerticalScrollbar.scss
@@ -1,6 +1,6 @@
 :root .neo-theme-neo-light { // .neo-grid-vertical-scrollbar
     --grid-scrollbar-color-scheme: light;
-    --grid-scrollbar-touch-width : 24px;
+    --grid-scrollbar-thumb-color : rgba(0, 0, 0, 0.4);
+    --grid-scrollbar-touch-width : 40px;
     --grid-scrollbar-width       : 16px;
 }
-

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`bottom : 1px;`
`3`	`3`	`color-scheme: var(--grid-scrollbar-color-scheme, light);`
`4`	`4`	`opacity : 0;`
	`5`	`+ overflow-x : hidden;`
`5`	`6`	`overflow-y : scroll;`
`6`	`7`	`position : absolute;`
`7`	`8`	`right : 0;`
`@@ -15,7 +16,7 @@`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`.neo-grid-scrollbar-content {`
`18`		`- width: 1px;`
	`19`	`+ width: 10px;`
`19`	`20`	`}`
`20`	`21`	`}`
`21`	`22`
`@@ -28,10 +29,17 @@`
`28`	`29`	`body.neo-has-touch {`
`29`	`30`	`.neo-grid-vertical-scrollbar {`
`30`	`31`	`opacity: 1;`
`31`		`- width : var(--grid-scrollbar-touch-width, 24px);`
	`32`	`+ width : var(--grid-scrollbar-touch-width, 40px);`
`32`	`33`
`33`	`34`	`&::-webkit-scrollbar {`
`34`		`- width: var(--grid-scrollbar-touch-width, 24px);`
	`35`	`+ width: var(--grid-scrollbar-touch-width, 40px);`
	`36`	`+ }`
	`37`	`+`
	`38`	`+ &::-webkit-scrollbar-thumb {`
	`39`	`+ background-clip : padding-box;`
	`40`	`+ background-color: var(--grid-scrollbar-thumb-color, rgba(128, 128, 128, 0.5));`
	`41`	`+ border : 8px solid transparent;`
	`42`	`+ border-radius : 16px;`
`35`	`43`	`}`
`36`	`44`	`}`
`37`	`45`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`:root .neo-theme-cyberpunk { // .neo-grid-vertical-scrollbar`
`2`	`2`	`--grid-scrollbar-color-scheme: dark;`
`3`		`- --grid-scrollbar-touch-width : 24px;`
	`3`	`+ --grid-scrollbar-thumb-color : rgba(0, 255, 255, 0.4);`
	`4`	`+ --grid-scrollbar-touch-width : 40px;`
`4`	`5`	`--grid-scrollbar-width : 16px;`
`5`	`6`	`}`
`6`		`-`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`:root .neo-theme-dark { // .neo-grid-vertical-scrollbar`
`2`	`2`	`--grid-scrollbar-color-scheme: dark;`
`3`		`- --grid-scrollbar-touch-width : 24px;`
	`3`	`+ --grid-scrollbar-thumb-color : rgba(255, 255, 255, 0.4);`
	`4`	`+ --grid-scrollbar-touch-width : 40px;`
`4`	`5`	`--grid-scrollbar-width : 16px;`
`5`	`6`	`}`
`6`		`-`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`:root .neo-theme-light { // .neo-grid-vertical-scrollbar`
`2`	`2`	`--grid-scrollbar-color-scheme: light;`
`3`		`- --grid-scrollbar-touch-width : 24px;`
	`3`	`+ --grid-scrollbar-thumb-color : rgba(0, 0, 0, 0.4);`
	`4`	`+ --grid-scrollbar-touch-width : 40px;`
`4`	`5`	`--grid-scrollbar-width : 16px;`
`5`	`6`	`}`
`6`		`-`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`:root .neo-theme-neo-dark { // .neo-grid-vertical-scrollbar`
`2`	`2`	`--grid-scrollbar-color-scheme: dark;`
`3`		`- --grid-scrollbar-touch-width : 24px;`
	`3`	`+ --grid-scrollbar-thumb-color : rgba(255, 255, 255, 0.4);`
	`4`	`+ --grid-scrollbar-touch-width : 40px;`
`4`	`5`	`--grid-scrollbar-width : 16px;`
`5`	`6`	`}`
`6`		`-`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`:root .neo-theme-neo-light { // .neo-grid-vertical-scrollbar`
`2`	`2`	`--grid-scrollbar-color-scheme: light;`
`3`		`- --grid-scrollbar-touch-width : 24px;`
	`3`	`+ --grid-scrollbar-thumb-color : rgba(0, 0, 0, 0.4);`
	`4`	`+ --grid-scrollbar-touch-width : 40px;`
`4`	`5`	`--grid-scrollbar-width : 16px;`
`5`	`6`	`}`
`6`		`-`