From 0b8eb19ea4ca71af206a56b20b2d403045e84769 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Mon, 29 Sep 2025 21:43:09 +0200
Subject: [PATCH] fix(roller-btn): Adjust roller button to prevent overlap with
 share button and reduce its size

- Fix the layout issue where the roller button overlaps the share button on certain profiles
- Decrease the size of the roller button to ensure proper spacing and alignment
- Ensure the updated design maintains usability and visual balance

Changes summary:
- Resolved an issue where the roller button was overlapping the share button on some profiles. The size of the roller button has been reduced to prevent overlap and improve the overall layout, ensuring a more consistent and user-friendly interface.
---
 components/ThemeManager.vue |  5 +++++
 styles/abstract/_root.scss  | 11 ++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/ThemeManager.vue b/components/ThemeManager.vue
index e828a39..8e8591f 100644
--- a/components/ThemeManager.vue
+++ b/components/ThemeManager.vue
@@ -101,6 +101,11 @@ $blur-backdrop: blur(1rem);
 		width: var(--roller-size);
 		height: var(--roller-size);
 
+		svg {
+			width: calc(var(--roller-size) * 0.525);
+			height: calc(var(--roller-size) * 0.525);
+		}
+
 		&:hover {
 			transform: scale(1.1);
 			background-image: none;
diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index e2f41df..7b8806c 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -28,10 +28,11 @@
     --w-scrollbar: 0.365rem;
 
     /* ? --- DSX floating roller btn --- */
-    // --roller-top: calc(var(--h-header) + 0.5rem);
-    --roller-top: calc(var(--h-header) / 4);
-    --roller-right: var(--roller-top);
-    --roller-size: 2.8rem;
+    --roller-top: calc(var(--h-header) + 0.125rem);
+    // --roller-top: calc(var(--h-header) / 4);
+    // --roller-right: var(--roller-top);
+    --roller-right: 0.5rem;
+    --roller-size: 2.2rem;
 
     /* ? --- Border-radius --- */
     --br: 1rem;
@@ -74,7 +75,7 @@
         --p-sidebar-nav: 0.3rem;
 
         --h-header: calc(44px + 12px + 4px); // titlebar height + header pt + header pb
-        --roller-right: calc(44px + 10px + 0.2rem);
+        // --roller-right: calc(44px + 10px + 0.2rem);
         --roller-size: 2rem;
     }