diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index 501a2fde3..e72680752 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -231,8 +231,8 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
         {/* Nav — Discord/Spotify: pill indicator, micro-animations, section dividers */}
         <nav
           className={cn(
-            'flex-1 min-h-0 overflow-y-auto custom-scrollbar pt-2 pb-4',
-            sidebarOpen ? 'px-3' : 'px-1.5'
+            'flex-1 min-h-0 overflow-y-auto pt-2 pb-4',
+            sidebarOpen ? 'px-3 custom-scrollbar' : 'px-1.5 scrollbar-hide'
           )}
           role="navigation"
           aria-label="Main navigation"
@@ -271,7 +271,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
 
                   return (
                     <li key={item.id} className="list-none m-0 p-0">
-                      <Tooltip content={item.label} position="right" disabled={sidebarOpen}>
+                      <Tooltip content={item.label} position="right" disabled={sidebarOpen} wrapperClassName="w-full">
                         <Link
                           to={route}
                           onClick={handleMobileNav}
@@ -370,7 +370,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
             </div>
           )}
 
-          <Tooltip content={t('nav.settings')} position="right" disabled={sidebarOpen}>
+          <Tooltip content={t('nav.settings')} position="right" disabled={sidebarOpen} wrapperClassName="w-full">
             <Link
               to="/settings"
               onClick={handleMobileNav}
@@ -403,14 +403,14 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
             </Link>
           </Tooltip>
 
-          <Tooltip content={t('nav.logout')} position="right" disabled={sidebarOpen}>
+          <Tooltip content={t('nav.logout')} position="right" disabled={sidebarOpen} wrapperClassName="w-full">
             <Button
               variant="ghost"
               onClick={handleLogout}
               className={cn(
                 'w-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg group',
                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
-                sidebarOpen ? 'gap-3 justify-start' : 'justify-center px-0'
+                sidebarOpen ? 'gap-3 justify-start' : 'justify-center px-0 gap-0'
               )}
               aria-label={t('nav.logout')}
             >
diff --git a/apps/web/src/components/ui/tooltip/Tooltip.tsx b/apps/web/src/components/ui/tooltip/Tooltip.tsx
index 61976acb4..9f407d55b 100644
--- a/apps/web/src/components/ui/tooltip/Tooltip.tsx
+++ b/apps/web/src/components/ui/tooltip/Tooltip.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTooltip } from './useTooltip';
 import { TooltipContent } from './TooltipContent';
+import { cn } from '@/lib/utils';
 import type { TooltipProps } from './types';
 
 export function Tooltip({
@@ -13,6 +14,7 @@ export function Tooltip({
   maxWidth,
   disabled = false,
   className,
+  wrapperClassName,
 }: TooltipProps) {
   const {
     visible,
@@ -38,7 +40,7 @@ export function Tooltip({
       : children;
 
   return (
-    <div ref={wrapperRef} className="relative inline-block" {...wrapperProps}>
+    <div ref={wrapperRef} className={cn('relative inline-block', wrapperClassName)} {...wrapperProps}>
       {child}
       {isMounted && (
         <TooltipContent
diff --git a/apps/web/src/components/ui/tooltip/types.ts b/apps/web/src/components/ui/tooltip/types.ts
index 9b169236d..08d71d45b 100644
--- a/apps/web/src/components/ui/tooltip/types.ts
+++ b/apps/web/src/components/ui/tooltip/types.ts
@@ -9,4 +9,6 @@ export interface TooltipProps {
   maxWidth?: number;
   disabled?: boolean;
   className?: string;
+  /** Additional classes for the tooltip wrapper div (e.g. 'w-full' to fill parent). */
+  wrapperClassName?: string;
 }