поправлен предосмотр

style.css

@@ -351,6 +351,7 @@ li:hover {
     height: 100%;
     background-color: rgba(0,0,0,0.8);
     backdrop-filter: blur(5px);
+    overflow: auto;
 }
 
 .preview-content {
@@ -358,9 +359,6 @@ li:hover {
     margin: 2% auto;
     padding: 0;
     border-radius: 8px;
-    width: 90%;
-    height: 90%;
-    max-width: 1200px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.3);
     display: flex;
     flex-direction: column;
@@ -368,39 +366,6 @@ li:hover {
     transition: all 0.3s ease;
 }
 
-/* Размеры для разных типов контента */
-.preview-content.image-type {
-    max-width: 90%;
-    max-height: 90%;
-    width: auto;
-    height: auto;
-}
-
-.preview-content.text-type {
-    max-width: 800px;
-    max-height: 80%;
-}
-
-.preview-content.audio-type {
-    max-width: 500px;
-    max-height: 300px;
-}
-
-.preview-content.video-type {
-    max-width: 90%;
-    max-height: 90%;
-}
-
-.preview-content.pdf-type {
-    max-width: 90%;
-    max-height: 90%;
-}
-
-.preview-content.default-type {
-    max-width: 90%;
-    max-height: 90%;
-}
-
 .preview-header {
     display: flex;
     justify-content: space-between;
@@ -453,39 +418,54 @@ li:hover {
     background: var(--bg-primary);
 }
 
+/* Стили для контейнера изображения */
+.preview-image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    padding: 10px;
+    background: var(--bg-primary);
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+    display: block;
+}
+
+/* Улучшаем скроллинг для очень больших изображений */
+.preview-modal::-webkit-scrollbar {
+    width: 8px;
+}
+
+.preview-modal::-webkit-scrollbar-track {
+    background: rgba(255,255,255,0.1);
+}
+
+.preview-modal::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.3);
+    border-radius: 4px;
+}
+
+.preview-modal::-webkit-scrollbar-thumb:hover {
+    background: rgba(255,255,255,0.5);
+}
+
 /* Адаптивность */
 @media (max-width: 768px) {
     .preview-content {
-        width: 95%;
-        height: 95%;
         margin: 2.5% auto;
     }
     
-    .preview-content.image-type {
-        max-width: 95%;
-        max-height: 95%;
-    }
-    
-    .preview-content.text-type {
-        max-width: 95%;
-        max-height: 80%;
-    }
-    
-    .preview-content.audio-type {
-        max-width: 95%;
-        max-height: 300px;
-    }
-    
-    .preview-content.video-type {
-        max-width: 95%;
-        max-height: 95%;
-    }
-    
-    .preview-content.pdf-type {
-        max-width: 95%;
-        max-height: 95%;
-    }
-    
     .preview-header {
         padding: 0.75rem;
     }
@@ -493,6 +473,10 @@ li:hover {
     .preview-title {
         font-size: 0.9rem;
     }
+    
+    .preview-image-container {
+        padding: 5px;
+    }
 }
 
 @media (max-width: 480px) {
@@ -560,27 +544,15 @@ li:hover {
         font-size: 0.8rem;
     }
     .preview-content {
-        width: 98%;
-        height: 98%;
         margin: 1% auto;
         border-radius: 4px;
     }
-    
-    .preview-content.image-type,
-    .preview-content.video-type,
-    .preview-content.pdf-type {
-        max-width: 98%;
-        max-height: 98%;
+    .preview-image-container {
+        padding: 2px;
     }
-    
-    .preview-content.text-type {
-        max-width: 98%;
-        max-height: 80%;
-    }
-    
-    .preview-content.audio-type {
-        max-width: 98%;
-        max-height: 250px;
+    .preview-image {
+        border-radius: 4px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
     }
 }
 
@@ -609,8 +581,4 @@ li:hover {
     .file-link {
         width: 100%;
     }
-    
-    .preview-content.audio-type {
-        max-height: 200px;
-    }
 }