diff --git a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreviewModal.tsx b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreviewModal.tsx
index 4c7276a..2a89b42 100644
--- a/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreviewModal.tsx
+++ b/teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreviewModal.tsx
@@ -1,5 +1,6 @@
 'use client';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { Document, Page, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
@@ -19,13 +20,23 @@ export function PreviewModal({ pdfBytes, onClose }: PreviewModalProps) {
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
 
-  return (
+  // Bug 1 fix: lock body scroll while modal is open
+  useEffect(() => {
+    const original = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = original; };
+  }, []);
+
+  // Bug 2 fix: render via portal so the modal escapes the sticky sidebar's stacking
+  // context. The zIndex of 9999 ensures the backdrop sits above all field overlay boxes
+  // (zIndex: 10/12) and dnd-kit DragOverlay regardless of parent stacking contexts.
+  const modal = (
     <div
       style={{
         position: 'fixed',
         inset: 0,
         background: 'rgba(0,0,0,0.7)',
-        zIndex: 50,
+        zIndex: 9999,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -76,4 +87,6 @@ export function PreviewModal({ pdfBytes, onClose }: PreviewModalProps) {
       </div>
     </div>
   );
+
+  return createPortal(modal, document.body);
 }