From 7b4069212ccdf37d607d179e3eddb7267d1f32d3 Mon Sep 17 00:00:00 2001
From: Matt Hills <mattintech@gmail.com>
Date: Thu, 8 May 2025 20:54:19 -0400
Subject: [PATCH] fixing product layout

---
 templates/admin/index.html | 20 +++++++++++---------
 templates/layout.html      | 27 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/templates/admin/index.html b/templates/admin/index.html
index 80afe85..f0b1c0b 100644
--- a/templates/admin/index.html
+++ b/templates/admin/index.html
@@ -11,14 +11,14 @@
         </div>
 
         {% if products %}
-        <table class="table table-striped">
-            <thead>
+        <table class="table table-striped table-bordered align-middle">
+            <thead class="table-light">
                 <tr>
-                    <th>Product ID</th>
-                    <th>Name</th>
-                    <th>Price</th>
-                    <th>Image</th>
-                    <th>Actions</th>
+                    <th style="width: 15%">Product ID</th>
+                    <th style="width: 25%">Name</th>
+                    <th style="width: 10%">Price</th>
+                    <th style="width: 20%">Image</th>
+                    <th style="width: 30%">Actions</th>
                 </tr>
             </thead>
             <tbody>
@@ -42,12 +42,14 @@
                     <td>
                         {% for field in product_data %}
                             {% if field.fieldName == '_image' %}
-                                <img src="{{ field.value }}" alt="Product image" style="max-height: 100px; max-width: 100px;">
+                                <div class="product-image-container">
+                                    <img src="{{ field.value }}" alt="Product image" class="product-image">
+                                </div>
                             {% endif %}
                         {% endfor %}
                     </td>
                     <td>
-                        <div class="btn-group">
+                        <div class="d-flex justify-content-center gap-2">
                             <a href="{{ url_for('admin.edit_product', product_id=product_id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                             <a href="{{ url_for('admin.generate_barcode_page', product_id=product_id) }}" class="btn btn-sm btn-outline-success">Barcodes</a>
                             <button type="button" class="btn btn-sm btn-outline-danger" 
diff --git a/templates/layout.html b/templates/layout.html
index 9134201..e3d6fac 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -23,6 +23,33 @@
             max-height: 200px;
             margin: 10px 0;
         }
+        
+        /* Product image styles for consistent display */
+        .product-image-container {
+            width: 100px;
+            height: 120px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto;
+            overflow: hidden;
+        }
+        
+        .product-image {
+            max-width: 100px;
+            max-height: 120px;
+            object-fit: contain;
+        }
+        
+        /* Table styles */
+        .table td {
+            vertical-align: middle;
+        }
+        
+        /* Ensure consistent height for table rows */
+        .table tr {
+            height: 150px;
+        }
     </style>
     {% block extra_css %}{% endblock %}
 </head>