Jelajahi Sumber

ui: widen scroll thumb hit area

Make the thumb overlay 12px wide while keeping the visible bar 6px centered for easier hover/drag.
David Hill 6 bulan lalu
induk
melakukan
4c2aa4ab90
1 mengubah file dengan 4 tambahan dan 3 penghapusan
  1. 4 3
      packages/ui/src/components/scroll-view.css

+ 4 - 3
packages/ui/src/components/scroll-view.css

@@ -17,9 +17,9 @@
 
 
 .scroll-view__thumb {
 .scroll-view__thumb {
   position: absolute;
   position: absolute;
-  right: 0;
+  right: 1px;
   top: 0;
   top: 0;
-  width: 16px;
+  width: 12px;
   transition: opacity 200ms ease;
   transition: opacity 200ms ease;
   cursor: default;
   cursor: default;
   user-select: none;
   user-select: none;
@@ -29,7 +29,8 @@
 .scroll-view__thumb::after {
 .scroll-view__thumb::after {
   content: "";
   content: "";
   position: absolute;
   position: absolute;
-  right: 4px;
+  left: 50%;
+  transform: translateX(-50%);
   top: 0;
   top: 0;
   bottom: 0;
   bottom: 0;
   width: 6px;
   width: 6px;