diff --git a/frontend/src/components/documents/DocumentDetailModal.tsx b/frontend/src/components/documents/DocumentDetailModal.tsx
index 118d934e..46e5824c 100644
--- a/frontend/src/components/documents/DocumentDetailModal.tsx
+++ b/frontend/src/components/documents/DocumentDetailModal.tsx
@@ -268,19 +268,19 @@ export function DocumentDetailModal({
         </div>
 
         {/* Content Area */}
-        <div className="min-h-0 flex-1 overflow-hidden">
-          {/* Desktop Layout: Side-by-side */}
-          <div className="hidden h-full lg:flex">
-            {/* Preview Panel (Left) */}
-            {documentHasFile && (
-              <div className={`${isFullscreen ? "w-full" : "w-3/5"} min-h-0 shrink-0 overflow-hidden border-r border-[var(--border-subtle)] transition-all`}>
-                {renderPreview()}
-              </div>
-            )}
+        <div className="min-h-0 flex-1 overflow-hidden lg:flex">
+          {/* One preview instance shared by mobile and desktop layouts. */}
+          {documentHasFile && (
+            <div className={`${currentActiveTab === "preview" ? "h-full" : "hidden"} ${
+              isFullscreen ? "lg:w-full" : "lg:w-3/5"
+            } min-h-0 shrink-0 overflow-hidden transition-all lg:block lg:border-r lg:border-[var(--border-subtle)]`}>
+              {renderPreview()}
+            </div>
+          )}
 
-            {/* Info Panel (Right) */}
-            {!(documentHasFile && isFullscreen) && (
-              <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+          {/* Desktop Info Panel (Right) */}
+          {!(documentHasFile && isFullscreen) && (
+            <div className="hidden min-h-0 min-w-0 flex-1 flex-col overflow-hidden lg:flex">
                 {/* Desktop Tabs */}
                 <div className="app-divider app-surface-muted shrink-0 border-b px-6">
                   <nav className="app-tabs-scroll flex gap-1 overflow-x-auto overflow-y-hidden pb-1">
@@ -511,16 +511,11 @@ export function DocumentDetailModal({
                     </div>
                   )}
                 </div>
-              </div>
-            )}
-          </div>
+            </div>
+          )}
 
           {/* Mobile Layout: Tabs */}
-          <div className="h-full overflow-y-auto bg-[var(--surface-secondary)] lg:hidden">
-            {currentActiveTab === "preview" && (
-              <div className="h-full min-h-[400px]">{renderPreview()}</div>
-            )}
-
+          <div className={`${currentActiveTab === "preview" ? "hidden" : "h-full overflow-y-auto bg-[var(--surface-secondary)]"} lg:hidden`}>
             {currentActiveTab === "info" && (
               <div className="p-4 sm:p-6">
                 <div className="space-y-4">
diff --git a/frontend/src/components/documents/DocumentPreview.tsx b/frontend/src/components/documents/DocumentPreview.tsx
index c755f71f..d27b8fd5 100644
--- a/frontend/src/components/documents/DocumentPreview.tsx
+++ b/frontend/src/components/documents/DocumentPreview.tsx
@@ -396,15 +396,20 @@ export function DocumentPreviewPane({ fileUrl, fileName, className = "" }: Docum
       )}
 
       {previewType === "image" && (
-        <div className="flex h-full min-h-0 items-center justify-center overflow-auto p-4">
+        <div className="relative flex h-full min-h-0 items-center justify-center overflow-auto p-4">
           {loading && <LoadingState label="Загрузка изображения..." />}
           {error && <ErrorState message={error} fileUrl={fileUrl} />}
           <Image
             src={fileUrl}
             alt={fileName}
-            className={`max-h-full max-w-full rounded-lg object-contain shadow-lg ${loading || error ? "hidden" : ""}`}
+            className={`max-h-full max-w-full rounded-lg object-contain shadow-lg transition-opacity ${
+              loading || error
+                ? "pointer-events-none absolute inset-0 m-auto opacity-0"
+                : "opacity-100"
+            }`}
             width={1600}
             height={1200}
+            loading="eager"
             unoptimized
             onLoad={() => setLoading(false)}
             onError={() => {