From 49f52108f5a9fb19ce3a424dc7de28880e32463a Mon Sep 17 00:00:00 2001
From: ktan-wolf <ktan247610@gmail.com>
Date: Wed, 18 Feb 2026 13:28:10 +0530
Subject: [PATCH] [BUG] Sidebar icons are misaligned when collapsed #337

---
 apps/web/src/components/dashboard/Sidebar.tsx | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/dashboard/Sidebar.tsx b/apps/web/src/components/dashboard/Sidebar.tsx
index 22265205..b7c776a0 100644
--- a/apps/web/src/components/dashboard/Sidebar.tsx
+++ b/apps/web/src/components/dashboard/Sidebar.tsx
@@ -421,7 +421,7 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
           // collapsed sidebar: show icon only
           <div
             onClick={handleProSectionClick}
-            className="w-full h-[44px] flex items-center justify-center rounded-md cursor-pointer transition-colors hover:bg-dash-hover group"
+            className="w-full h-[44px] flex items-center justify-start pl-3 rounded-md cursor-pointer transition-colors hover:bg-dash-hover group"
             role="button"
             tabIndex={0}
             aria-label="Opensox Pro"
@@ -444,12 +444,30 @@ export default function Sidebar({ overlay = false }: { overlay?: boolean }) {
         )}
 
         {/* utility features */}
-        <SidebarItem
-          itemName="Request a feature"
-          onclick={reqFeatureHandler}
-          icon={<SparklesIcon className="size-5" />}
-          collapsed={isCollapsed}
-        />
+        {isCollapsed ? (
+          <div
+            onClick={reqFeatureHandler}
+            className="w-full h-[44px] flex items-center justify-start pl-3 rounded-md cursor-pointer transition-colors hover:bg-dash-hover group"
+            role="button"
+            tabIndex={0}
+            aria-label="Request a feature"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                reqFeatureHandler();
+              }
+            }}
+          >
+            <SparklesIcon className="size-5 text-text-secondary group-hover:text-text-primary transition-colors" />
+          </div>
+        ) : (
+          <SidebarItem
+            itemName="Request a feature"
+            onclick={reqFeatureHandler}
+            icon={<SparklesIcon className="size-5" />}
+            collapsed={isCollapsed}
+          />
+        )}
       </div>
 
       {/* Bottom profile */}