fix: notebook name overflows sidebar on hover with bold + opaque background instead of tooltip overlay

memento-note/components/notebooks-list.tsx

@@ -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}>
+    <span className="relative truncate min-w-0 group-hover:overflow-visible group-hover:text-nowrap">
-      <TooltipTrigger asChild>
+      <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]">
-        <span
+        {children}
-          ref={(el) => { spanRef.current = el; checkTruncation(el) }}
+      </span>
-          onMouseEnter={() => checkTruncation(spanRef.current)}
+    </span>
-          className="truncate min-w-0"
-        >
-          {children}
-        </span>
-      </TooltipTrigger>
-      {isTruncated && (
-        <TooltipContent side="right" className="max-w-[240px] break-words text-sm">
-          {name}
-        </TooltipContent>
-      )}
-    </Tooltip>
   )
 }
 
@@ -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>
                     )}