Optimize tooltips and layout

lightrag_webui/src/features/DocumentManager.tsx

@@ -47,14 +47,6 @@ const getDisplayFileName = (doc: DocStatusResponse, maxLength: number = 20): str
 };
 
 const pulseStyle = `
-/* Custom tooltip styles */
-.tooltip-top {
-  bottom: 100% !important;
-  top: auto !important;
-  margin-bottom: 0.25rem !important;
-  margin-top: 0 !important;
-}
-
 /* Fixed tooltip styles for small tables */
 .tooltip-fixed {
   position: fixed !important;
@@ -142,13 +134,21 @@ export default function DocumentManager() {
   useEffect(() => {
     if (!docs) return;
 
-    // Function to handle mouse movement
+    // Function to handle mouse movement - throttled to reduce layout calculations
-    const handleMouseMove = (event: MouseEvent) => {
+    let lastExecution = 0;
+    const throttleInterval = 50; // ms
+
+    const handleMouseMove = () => {
+      const now = Date.now();
+      if (now - lastExecution < throttleInterval) return;
+      lastExecution = now;
+
       const cardContent = cardContentRef.current;
       if (!cardContent) return;
 
       // Get all visible tooltips
       const visibleTooltips = document.querySelectorAll<HTMLElement>('.group:hover > div[class*="invisible group-hover:visible absolute"]');
+      if (visibleTooltips.length === 0) return;
 
       visibleTooltips.forEach(tooltip => {
         // Get the parent element that triggered the tooltip
@@ -160,12 +160,12 @@ export default function DocumentManager() {
         // Use fixed positioning for all tooltips
         tooltip.classList.add('tooltip-fixed');
 
-        // Calculate position based on trigger element and mouse
+        // Calculate position based on trigger element
         const tooltipHeight = tooltip.offsetHeight;
         const viewportHeight = window.innerHeight;
 
         // Check if tooltip would go off the bottom of the viewport
-        const wouldOverflowBottom = event.clientY + tooltipHeight > viewportHeight;
+        const wouldOverflowBottom = triggerRect.bottom + tooltipHeight + 5 > viewportHeight;
 
         if (wouldOverflowBottom) {
           // Position above the trigger
@@ -273,7 +273,7 @@ export default function DocumentManager() {
       <CardHeader className="py-2 px-6">
         <CardTitle className="text-lg">{t('documentPanel.documentManager.title')}</CardTitle>
       </CardHeader>
-      <CardContent className="flex-1 flex flex-col min-h-0 overflow-hidden">
+      <CardContent className="flex-1 flex flex-col min-h-0 overflow-auto">
         <div className="flex gap-2 mb-2">
           <div className="flex gap-2">
             <Button
@@ -340,9 +340,8 @@ export default function DocumentManager() {
             )}
             {docs && (
               <div className="absolute inset-0 flex flex-col p-0">
-                <div className="w-full h-full flex flex-col rounded-lg border border-gray-200 dark:border-gray-700">
+                <div className="w-full h-full flex flex-col rounded-lg border border-gray-200 dark:border-gray-700 overflow-auto">
-                  <div className="flex-1 overflow-hidden flex flex-col">
+                  <Table className="w-full">
-                    <Table className="w-full" style={{ minHeight: '100%', height: '100%'}}>
                     <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
                       <TableRow className="border-b bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/75 shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]">
                         <TableHead>{t('documentPanel.documentManager.columns.id')}</TableHead>
@@ -422,7 +421,6 @@ export default function DocumentManager() {
                   </Table>
                 </div>
               </div>
-              </div>
             )}
           </CardContent>
         </Card>