senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix sidebar scrollbar visibility and tooltip width in collapsed mode

Browse source 
Add wrapperClassName prop to Tooltip for full-width layout in sidebar.
Hide scrollbar when sidebar is collapsed, show custom scrollbar when open.
Fix logout button gap in collapsed sidebar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
senke 2026-03-25 23:34:17 +01:00
parent 4d4bfc5452
commit 4247e2b76b
3 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/web/src/components/layout/Sidebar.tsx
View file

@ -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')}
>

4
apps/web/src/components/ui/tooltip/Tooltip.tsx
View file

@ -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

2
apps/web/src/components/ui/tooltip/types.ts
View file

@ -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;
}