sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: notebook name overflows sidebar on hover with bold + opaque background instead of tooltip overlay
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 44s
Details

Browse Source
This commit is contained in:
Antigravity
2026-05-03 19:43:57 +00:00
parent 718f4c6900
commit 1ed7839334
1 changed files with 10 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
memento-note/components/notebooks-list.tsx
View File

@@ -18,34 +18,14 @@ import { useLabels } from '@/context/LabelContext'
import { LabelManagementDialog } from '@/components/label-management-dialog'
import { Notebook } from '@/lib/types'
import { getNotebookIcon } from '@/lib/notebook-icon'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
function NotebookNameTooltip({ name, children }: { name: string; children: React.ReactNode }) {
const spanRef = useRef<HTMLSpanElement>(null)
const [isTruncated, setIsTruncated] = useState(false)
const checkTruncation = useCallback((node: HTMLSpanElement | null) => {
if (!node) return
setIsTruncated(node.scrollWidth > node.clientWidth)
}, [])
function NotebookName({ children }: { name: string; children: React.ReactNode }) {
return (
<Tooltip open={isTruncated ? undefined : false}>
<TooltipTrigger asChild>
<span
ref={(el) => { spanRef.current = el; checkTruncation(el) }}
onMouseEnter={() => checkTruncation(spanRef.current)}
className="truncate min-w-0"
>
{children}
</span>
</TooltipTrigger>
{isTruncated && (
<TooltipContent side="right" className="max-w-[240px] break-words text-sm">
{name}
</TooltipContent>
)}
</Tooltip>
<span className="relative truncate min-w-0 group-hover:overflow-visible group-hover:text-nowrap">
<span className="group-hover:font-bold group-hover:relative group-hover:z-20 group-hover:inline-block group-hover:bg-white dark:group-hover:bg-[#1e2128] group-hover:pr-4 group-hover:shadow-[4px_0_12px_8px] group-hover:shadow-white dark:group-hover:shadow-[#1e2128]">
{children}
</span>
</span>
)
}
@@ -182,14 +162,14 @@ export function NotebooksList() {
className={cn("w-5 h-5 flex-shrink-0 fill-current", !notebook.color && "text-primary dark:text-primary-foreground")}
style={notebook.color ? { color: notebook.color } : undefined}
/>
<NotebookNameTooltip name={notebook.name}>
<NotebookName name={notebook.name}>
<span
className={cn("text-[15px] font-medium tracking-wide", !notebook.color && "text-primary dark:text-primary-foreground")}
style={notebook.color ? { color: notebook.color } : undefined}
>
{notebook.name}
</span>
</NotebookNameTooltip>
</NotebookName>
</div>
<div className="flex items-center gap-1 flex-shrink-0">
{/* Actions menu for active notebook */}
@@ -273,11 +253,11 @@ export function NotebooksList() {
)}
>
<NotebookIcon className="w-5 h-5 flex-shrink-0" />
<NotebookNameTooltip name={notebook.name}>
<NotebookName name={notebook.name}>
<span className="text-[15px] font-medium tracking-wide text-start">
{notebook.name}
</span>
</NotebookNameTooltip>
</NotebookName>
{(notebook as any).notesCount > 0 && (
<span className="text-xs text-gray-400 ms-2 flex-shrink-0">({new Intl.NumberFormat(language).format((notebook as any).notesCount)})</span>
)}