Update app.py

app.py

@@ -142,7 +142,6 @@ def catalog():
             .theme-toggle {
                 background: none;
                 border: none;
-                font-size: 1.5rem;
                 cursor: pointer;
                 color: #4a5568;
                 transition: color 0.3s ease;
@@ -227,7 +226,7 @@ def catalog():
             .product-image img {
                 max-width: 100%;
                 max-height: 100%;
-                object-fit: contain;
+                object-fit: cover;
                 transition: transform 0.3s ease;
             }
             .product-image img:hover {
@@ -313,22 +312,22 @@ def catalog():
             .modal {
                 display: none;
                 position: fixed;
-                z-index: 1001;
+                z-index: 1000;
                 left: 0;
                 top: 0;
                 width: 100%;
                 height: 100%;
-                background-color: rgba(0,0,0,0.5);
+                background-color: rgba(0,0, 0, 0.5);
                 backdrop-filter: blur(5px);
             }
             .modal-content {
                 background: #fff;
-                margin: 5% auto;
+                margin: 15% auto;
                 padding: 20px;
                 border-radius: 15px;
                 width: 90%;
                 max-width: 700px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                 animation: slideIn 0.3s ease-out;
             }
             body.dark-mode .modal-content {
@@ -368,7 +367,7 @@ def catalog():
             .cart-item img {
                 width: 50px;
                 height: 50px;
-                object-fit: contain;
+                object-fit: cover;
                 border-radius: 8px;
                 margin-right: 15px;
             }
@@ -683,7 +682,7 @@ def product_detail(index):
                     <div class="swiper-zoom-container">
                         <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
                              alt="{{ product['name'] }}" 
-                             style="max-width: 100%; max-height: 300px; object-fit: contain;">
+                             style="max-width: 100%; max-height: 300px; object-fit: cover;">
                     </div>
                 </div>
                 {% endfor %}