fix: Eliminated horizontal scroll and styled vertical scrollbar for sidebar

frontend/components/Sidebar.tsx

@@ -54,7 +54,7 @@ export default function Sidebar({ tabs, activeTab, onTabSelect, status, lang }:
         {isExpanded && <h1 className="text-xl font-bold tracking-tight text-white whitespace-nowrap animate-in fade-in duration-500">AndesOps</h1>}
       </div>
 
-      <nav className="flex-1 flex flex-col gap-2 overflow-y-auto custom-scrollbar pr-1">
+      <nav className="flex-1 flex flex-col gap-2 overflow-y-auto overflow-x-hidden custom-scrollbar pr-1">
         {tabs.map((tab) => {
           const isActive = activeTab === tab;
           const { label, icon } = getTabLabel(tab);

frontend/globals.css

@@ -64,14 +64,29 @@
 }
 
 /* Custom scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+  height: 0px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(168, 85, 247, 0.2);
+  border-radius: 10px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(168, 85, 247, 0.4);
+}
+
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 ::-webkit-scrollbar-track {
   @apply bg-transparent;
 }
 ::-webkit-scrollbar-thumb {
-  @apply bg-white/10 rounded-full hover:bg-white/20 transition-colors;
+  @apply bg-white/5 rounded-full hover:bg-white/10 transition-colors;
 }
 
 ::selection {