From 65e07c2f1b0953836f8e565546afd17c8fe0076c Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Wed, 22 Oct 2025 23:49:34 +0300
Subject: [PATCH] fix: Increase modal image display size for better viewing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increased modal height from 70vh to 85vh for larger display
- Expanded min-height from 60vh to 80vh for more breathing room
- Changed modal-dialog-centered modal-lg to modal-xl in productkit_detail
- Images now display at nearly full screen size for 1200x1200 large images
- Improved background color and layout for modal-body

Better user experience:
- Images display closer to their full 1200x1200 resolution
- More space for image viewing without scrolling
- Consistent styling across product and productkit modals

🤖 Generated with Claude Code

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

diff --git a/myproject/products/templates/products/product_detail.html b/myproject/products/templates/products/product_detail.html
index e4e81d5..db390f2 100644
--- a/myproject/products/templates/products/product_detail.html
+++ b/myproject/products/templates/products/product_detail.html
@@ -66,8 +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: 60vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
-                                                    <img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="max-height: 70vh; max-width: 100%; object-fit: contain;">
+                                                <div class="text-center" style="min-height: 80vh; 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;">
                                                 </div>
                                             </div>
                                             {% endfor %}
diff --git a/myproject/products/templates/products/productkit_detail.html b/myproject/products/templates/products/productkit_detail.html
index 1767630..9fb5e2a 100644
--- a/myproject/products/templates/products/productkit_detail.html
+++ b/myproject/products/templates/products/productkit_detail.html
@@ -190,14 +190,15 @@
 
                         <!-- Модальное окно для просмотра -->
                         <div class="modal fade" id="photoModal{{ photo.pk }}" tabindex="-1" aria-hidden="true">
-                            <div class="modal-dialog modal-dialog-centered modal-lg">
+                            <div class="modal-dialog modal-dialog-centered modal-xl">
                                 <div class="modal-content">
                                     <div class="modal-header">
                                         <h5 class="modal-title">Фото комплекта</h5>
                                         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                     </div>
-                                    <div class="modal-body text-center">
-                                        <img src="{{ photo.get_large_url }}" class="img-fluid" style="max-height: 70vh;">
+                                    <div class="modal-body text-center" style="min-height: 80vh; 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%;">
                                     </div>
                                 </div>
                             </div>