diff --git a/web-ui/src/components/cases/documents-panel.tsx b/web-ui/src/components/cases/documents-panel.tsx
index effe15c..366f37f 100644
--- a/web-ui/src/components/cases/documents-panel.tsx
+++ b/web-ui/src/components/cases/documents-panel.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Dialog,
   DialogContent,
@@ -126,33 +125,26 @@ function DocumentPreviewDialog({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const loadText = async () => {
-    if (text !== null) return; // already loaded
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await apiRequest<{ text: string }>(`/api/documents/${doc.id}/text`);
-      setText(res.text || "(ריק)");
-    } catch {
-      setError("לא ניתן לטעון את תוכן המסמך");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleOpenChange = (v: boolean) => {
-    if (v) loadText();
-    if (!v) {
+  useEffect(() => {
+    if (!open) {
       setText(null);
       setError(null);
+      return;
     }
-    onOpenChange(v);
-  };
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    apiRequest<{ text: string }>(`/api/documents/${doc.id}/text`)
+      .then((res) => { if (!cancelled) setText(res.text || "(ריק)"); })
+      .catch(() => { if (!cancelled) setError("המסמך עדיין לא עובד או שאין בו טקסט"); })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [open, doc.id]);
 
   const displayName = doc.title || filenameFromPath(doc.file_path);
 
   return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-2xl max-h-[80vh] flex flex-col" dir="rtl">
         <DialogHeader>
           <DialogTitle className="text-right">{displayName}</DialogTitle>
@@ -168,11 +160,11 @@ function DocumentPreviewDialog({
             <div className="text-center py-12 text-danger text-sm">{error}</div>
           )}
           {text !== null && !loading && (
-            <ScrollArea className="h-[60vh] overflow-hidden" dir="rtl">
+            <div className="h-[60vh] overflow-y-auto" dir="rtl">
               <pre className="whitespace-pre-wrap text-sm text-ink leading-relaxed font-sans p-2">
                 {text}
               </pre>
-            </ScrollArea>
+            </div>
           )}
         </div>
         <DialogFooter showCloseButton />
@@ -385,13 +377,13 @@ export function DocumentsPanel({
         </div>
       )}
 
-      <ScrollArea className="max-h-[70vh] overflow-hidden" dir="rtl">
+      <div className="max-h-[70vh] overflow-y-auto" dir="rtl">
         <ul className="divide-y divide-rule" dir="rtl">
           {sorted.map((doc) => (
             <DocumentRow key={doc.id} doc={doc} caseNumber={caseNumber} />
           ))}
         </ul>
-      </ScrollArea>
+      </div>
     </div>
   );
 }