From 493a1b7f65498042868670973567b7bed6edf8e0 Mon Sep 17 00:00:00 2001
From: Ly-sec <itslysec@gmail.com>
Date: Fri, 7 Nov 2025 20:03:30 +0100
Subject: [PATCH] WallpaperPanel: adjust scrollbar style

---
 Modules/Panels/Settings/Tabs/WallpaperTab.qml |  1 +
 Modules/Panels/Wallpaper/WallpaperPanel.qml   | 45 +++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/Modules/Panels/Settings/Tabs/WallpaperTab.qml b/Modules/Panels/Settings/Tabs/WallpaperTab.qml
index 018ac7d7..6fb57733 100644
--- a/Modules/Panels/Settings/Tabs/WallpaperTab.qml
+++ b/Modules/Panels/Settings/Tabs/WallpaperTab.qml
@@ -85,6 +85,7 @@ ColumnLayout {
       border.color: Color.mOutline
       border.width: Style.borderS
       implicitHeight: contentCol.implicitHeight + Style.marginL * 2
+      clip: true
 
       ColumnLayout {
         id: contentCol
diff --git a/Modules/Panels/Wallpaper/WallpaperPanel.qml b/Modules/Panels/Wallpaper/WallpaperPanel.qml
index 3cca50d9..9da8f70a 100644
--- a/Modules/Panels/Wallpaper/WallpaperPanel.qml
+++ b/Modules/Panels/Wallpaper/WallpaperPanel.qml
@@ -426,6 +426,51 @@ SmartPanel {
 
         ScrollBar.vertical: ScrollBar {
           policy: ScrollBar.AsNeeded
+          parent: wallpaperGridView
+          x: wallpaperGridView.mirrored ? 0 : wallpaperGridView.width - width
+          y: 0
+          height: wallpaperGridView.height
+          active: wallpaperGridView.ScrollBar.horizontal.active
+
+          property color handleColor: Qt.alpha(Color.mHover, 0.8)
+          property color handleHoverColor: handleColor
+          property color handlePressedColor: handleColor
+          property real handleWidth: 6
+          property real handleRadius: Style.radiusM
+
+          contentItem: Rectangle {
+            implicitWidth: parent.handleWidth
+            implicitHeight: 100
+            radius: parent.handleRadius
+            color: parent.pressed ? parent.handlePressedColor : parent.hovered ? parent.handleHoverColor : parent.handleColor
+            opacity: parent.policy === ScrollBar.AlwaysOn || parent.active ? 1.0 : 0.0
+
+            Behavior on opacity {
+              NumberAnimation {
+                duration: Style.animationFast
+              }
+            }
+
+            Behavior on color {
+              ColorAnimation {
+                duration: Style.animationFast
+              }
+            }
+          }
+
+          background: Rectangle {
+            implicitWidth: parent.handleWidth
+            implicitHeight: 100
+            color: Color.transparent
+            opacity: parent.policy === ScrollBar.AlwaysOn || parent.active ? 0.3 : 0.0
+            radius: parent.handleRadius / 2
+
+            Behavior on opacity {
+              NumberAnimation {
+                duration: Style.animationFast
+              }
+            }
+          }
         }
 
         delegate: ColumnLayout {