LuLu-ling · Sep 25, 2026
diff --git a/app/assets/scss/_scrollbar.scss b/app/assets/scss/_scrollbar.scss
@@ -0,0 +1,37 @@
+@mixin scrollbars {
+  $target: ':where(*)';
+
+  #{$target} {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  #{$target}:is(:hover, .gp-scrollbar-active) {
+    scrollbar-color: var(--gitpulse-scrollbar-thumb) transparent;
+  }
+
+  #{$target}::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  #{$target}::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  #{$target}::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 3px;
+    transition: background-color 0.3s ease;
+  }
+
+  #{$target}:is(:hover, .gp-scrollbar-active)::-webkit-scrollbar-thumb {
+    background-color: var(--gitpulse-scrollbar-thumb);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #{$target}::-webkit-scrollbar-thumb {
+      transition: none;
+    }
+  }
+}
diff --git a/app/assets/scss/main.scss b/app/assets/scss/main.scss
@@ -1,4 +1,5 @@
 @use 'variables' as *;
+@use 'scrollbar' as scrollbar;
 
 :root {
   color-scheme: light;
@@ -700,3 +701,5 @@ hr {
     transform: rotate(360deg);
   }
 }
+
+@include scrollbar.scrollbars;
diff --git a/app/components/dashboard/SearchResultPreview.vue b/app/components/dashboard/SearchResultPreview.vue
@@ -259,19 +259,6 @@ const getStateIcon = (item: SearchResultItem) => {
   overflow-y: auto;
   padding-right: 0.25rem;
   flex: 1;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: color-mix(in srgb, var(--gitpulse-accent) 25%, transparent);
-    border-radius: 4px;
-  }
 }
 
 .srp-card {

diff --git a/app/components/dashboard/detail/DiscussionDetail.vue b/app/components/dashboard/detail/DiscussionDetail.vue
@@ -38,7 +38,6 @@ const EMPTY_PAGE_INFO: DiscussionPageInfo = {
 
 const { t } = useI18n();
 const apiFetch = useGitPulseApiFetch();
-const { isScrolling: isSidebarScrolling, onScroll: onSidebarScroll } = useAutoHideScrollState();
 
 const discussionState = shallowRef<DiscussionDetailPayload>(cloneDiscussion(props.discussion));
 const comments = shallowRef<DiscussionComment[]>([]);
@@ -455,11 +454,7 @@ watch(
       </div>
 
       <div class="column detail-sidebar-column" :inert="detailSidebarHidden || undefined">
-        <div
-          class="sidebar-scroll"
-          :class="{ 'sidebar-scroll--active': isSidebarScrolling }"
-          @scroll="onSidebarScroll"
-        >
+        <div class="sidebar-scroll">
           <DiscussionActions
             :discussion="displayDiscussion"
             :source-notification="sourceNotification"
@@ -511,33 +506,6 @@ watch(
   overflow-y: auto;
   padding-right: 0.75rem;
   scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  transition: scrollbar-color 0.3s ease;
-
-  &:hover,
-  &--active {
-    scrollbar-color: var(--gitpulse-scrollbar-thumb) transparent;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: 3px;
-    transition: background-color 0.3s ease;
-  }
-
-  &:hover::-webkit-scrollbar-thumb,
-  &--active::-webkit-scrollbar-thumb {
-    background-color: var(--gitpulse-scrollbar-thumb);
-  }
 }
 
 .discussion-detail__composer {

diff --git a/app/components/dashboard/detail/IssueDetail.vue b/app/components/dashboard/detail/IssueDetail.vue
@@ -30,11 +30,7 @@
       </div>
 
       <div class="column detail-sidebar-column" :inert="detailSidebarHidden || undefined">
-        <div
-          class="sidebar-scroll"
-          :class="{ 'sidebar-scroll--active': isSidebarScrolling }"
-          @scroll="onSidebarScroll"
-        >
+        <div class="sidebar-scroll">
           <IssueTypeCard
             :issue-type="currentIssue?.type"
             :can-edit-issue-type="canEditIssueType"
@@ -150,8 +146,6 @@ usePageMeta(
   }
 );
 
-const { isScrolling: isSidebarScrolling, onScroll: onSidebarScroll } = useAutoHideScrollState();
-
 const repoInfo = computed(() => {
   return parseGitHubRepoPath(currentIssue.value?.repository_url);
 });
@@ -453,33 +447,6 @@ watch(
   overflow-y: auto;
   padding-right: 0.75rem;
   scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  transition: scrollbar-color 0.3s ease;
-
-  &:hover,
-  &--active {
-    scrollbar-color: var(--gitpulse-scrollbar-thumb) transparent;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: 3px;
-    transition: background-color 0.3s ease;
-  }
-
-  &:hover::-webkit-scrollbar-thumb,
-  &--active::-webkit-scrollbar-thumb {
-    background-color: var(--gitpulse-scrollbar-thumb);
-  }
 }
 
 .issue-detail__timeline {

diff --git a/app/components/dashboard/detail/PRDetail.vue b/app/components/dashboard/detail/PRDetail.vue
@@ -121,11 +121,7 @@
       </div>
 
       <div class="column detail-sidebar-column" :inert="detailSidebarHidden || undefined">
-        <div
-          class="sidebar-scroll"
-          :class="{ 'sidebar-scroll--active': isSidebarScrolling }"
-          @scroll="onSidebarScroll"
-        >
+        <div class="sidebar-scroll">
           <PRLabels
             :labels="currentPullRequest?.labels || []"
             :can-edit-labels="canEditLabels"
@@ -329,8 +325,6 @@ usePageMeta(
   }
 );
 
-const { isScrolling: isSidebarScrolling, onScroll: onSidebarScroll } = useAutoHideScrollState();
-
 const repoPermissions = ref(createEmptyRepoPermissions());
 
 const repoInfo = computed(() => {
@@ -1119,33 +1113,6 @@ watch(
   overflow-y: auto;
   padding-right: 0.75rem;
   scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  transition: scrollbar-color 0.3s ease;
-
-  &:hover,
-  &--active {
-    scrollbar-color: var(--gitpulse-scrollbar-thumb) transparent;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: 3px;
-    transition: background-color 0.3s ease;
-  }
-
-  &:hover::-webkit-scrollbar-thumb,
-  &--active::-webkit-scrollbar-thumb {
-    background-color: var(--gitpulse-scrollbar-thumb);
-  }
 }
 
 .pr-detail-layout {

diff --git a/app/components/dashboard/detail/ReleaseDetail.vue b/app/components/dashboard/detail/ReleaseDetail.vue
@@ -22,7 +22,6 @@ const props = defineProps<{
 }>();
 
 const { locale, t } = useI18n();
-const { isScrolling: isSidebarScrolling, onScroll: onSidebarScroll } = useAutoHideScrollState();
 const { openRepository } = useDashboardRepositoryNavigation();
 const relativeTimeNow = useRelativeTimeNow();
 
@@ -166,11 +165,7 @@ usePageMeta(
                 {{ t('releaseDetail.assetCount', { count: assets.length }) }}
               </span>
             </div>
-            <div
-              class="sidebar-card__content sidebar-card__content--scrollable sidebar-scroll"
-              :class="{ 'sidebar-scroll--active': isSidebarScrolling }"
-              @scroll="onSidebarScroll"
-            >
+            <div class="sidebar-card__content sidebar-card__content--scrollable sidebar-scroll">
               <ReleaseAssetsList :assets="assets" />
             </div>
           </section>
@@ -422,33 +417,6 @@ usePageMeta(
   min-height: 0;
   overflow-y: auto;
   scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  transition: scrollbar-color 0.3s ease;
-
-  &:hover,
-  &.sidebar-scroll--active {
-    scrollbar-color: var(--gitpulse-scrollbar-thumb) transparent;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: 3px;
-    transition: background-color 0.3s ease;
-  }
-
-  &:hover::-webkit-scrollbar-thumb,
-  &.sidebar-scroll--active::-webkit-scrollbar-thumb {
-    background-color: var(--gitpulse-scrollbar-thumb);
-  }
 }
 
 .release-sidebar__title {

diff --git a/app/components/dashboard/detail/RepoDetail.vue b/app/components/dashboard/detail/RepoDetail.vue
@@ -1629,29 +1629,6 @@ html.dark .repo-detail-section__chrome {
   /* Keep the last Links card fully inside the scrollport (border + shadow). */
   padding: 0 0.75rem 0.75rem 0;
   scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-
-  &:hover {
-    scrollbar-color: var(--gitpulse-scrollbar-thumb) transparent;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: 3px;
-  }
-
-  &:hover::-webkit-scrollbar-thumb {
-    background-color: var(--gitpulse-scrollbar-thumb);
-  }
 }
 
 .sidebar-card {

diff --git a/app/components/dashboard/widgets/WidgetsPanel.vue b/app/components/dashboard/widgets/WidgetsPanel.vue
@@ -1,15 +1,10 @@
-<script setup lang="ts">
-import 'simplebar-vue/dist/simplebar.min.css';
-import SimpleBar from 'simplebar-vue';
-</script>
-
 <template>
   <div class="widgets-panel">
-    <SimpleBar class="widgets-panel__scroll">
+    <div class="widgets-panel__scroll">
       <div class="widgets-panel__content">
         <slot></slot>
       </div>
-    </SimpleBar>
+    </div>
   </div>
 </template>
 <style scoped lang="scss">
@@ -26,6 +21,7 @@ import SimpleBar from 'simplebar-vue';
     height: 100%;
     min-height: 0;
     padding-right: 1.25rem;
+    overflow-y: auto;
   }
 
   &__content {

diff --git a/app/composables/useAutoHideScrollState.ts b/app/composables/useAutoHideScrollState.ts