fix: Optimize modal image sizing for better viewport fit

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

@@ -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 %}

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>