From 3b50d82d19317d270686ede23ac70ad642b06388 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Wed, 22 Oct 2025 23:59:41 +0300
Subject: [PATCH] fix: Optimize modal image sizing for better viewport fit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adjusted modal image display to fit properly in viewport:
- Reduced min-height from 80vh to 60vh for header+navigation space
- Reduced max-height from 85vh to 75vh to ensure bottom controls visible
- Kept max-width: 85vw for large square image display
- Images now properly contained within modal with visible controls

Result: Images display large but modals fit completely on screen without scrolling.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 myproject/products/templates/products/product_detail.html    | 4 ++--
 myproject/products/templates/products/productkit_detail.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/myproject/products/templates/products/product_detail.html b/myproject/products/templates/products/product_detail.html
index db390f2..d4025d9 100644
--- a/myproject/products/templates/products/product_detail.html
+++ b/myproject/products/templates/products/product_detail.html
@@ -66,9 +66,9 @@
                                         <div class="carousel-inner">
                                             {% for photo in product_photos %}
                                             <div class="carousel-item {% if forloop.first %}active{% endif %}">
-                                                <div class="text-center" style="min-height: 80vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
+                                                <div class="text-center" style="min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                                     <!-- Large 1200x1200 WebP для полного размера просмотра -->
-                                                    <img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="max-height: 85vh; max-width: 95%; object-fit: contain;">
+                                                    <img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="height: auto; width: auto; max-height: 75vh; max-width: 85vw; object-fit: contain;">
                                                 </div>
                                             </div>
                                             {% endfor %}
diff --git a/myproject/products/templates/products/productkit_detail.html b/myproject/products/templates/products/productkit_detail.html
index 9fb5e2a..28f174b 100644
--- a/myproject/products/templates/products/productkit_detail.html
+++ b/myproject/products/templates/products/productkit_detail.html
@@ -196,9 +196,9 @@
                                         <h5 class="modal-title">Фото комплекта</h5>
                                         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                     </div>
-                                    <div class="modal-body text-center" style="min-height: 80vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
+                                    <div class="modal-body text-center" style="min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                         <!-- Large 1200x1200 WebP для полного размера просмотра -->
-                                        <img src="{{ photo.get_large_url }}" class="img-fluid" style="max-height: 85vh; max-width: 95%;">
+                                        <img src="{{ photo.get_large_url }}" class="img-fluid" style="height: auto; width: auto; max-height: 75vh; max-width: 85vw;">
                                     </div>
                                 </div>
                             </div>