Fix styling for new ingredient table

Each row in the table can be clicked/tapped to be crossed off to complete
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

src/components/Detail/IngredientTableView.astro

@@ -19,7 +19,7 @@ const tableView = true
 )}
 
 {tableView && (
-    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
+    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
         <thead>
             <tr>
                 <th class="px-4 py-2">Quantity</th>
@@ -29,9 +29,9 @@ const tableView = true
         </thead>
         <tbody>
             {
-            ingredients.map(ing => (
+            ingredients.map((ing, index) => (
                 <>
-                    <tr class="border-t border-gray-600">
+                    <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
                         <td class="px-4 py-2">{ing.quantity}</td>
                         <td class="px-4 py-2">{ing.unit}</td>
                         <td class="px-4 py-2">{ing.name}</td>
@@ -41,4 +41,28 @@ const tableView = true
             }
         </tbody>
     </table>
-)}
+)}
+
+<style>
+    .ingredient-row.completed {
+        /* background-color: rgba(0, 0, 0, 0.4) !important; */
+        opacity: 0.6;
+    }
+    
+    .ingredient-row.completed td {
+        text-decoration: line-through;
+        color: rgba(255, 255, 255, 0.5);
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const rows = document.querySelectorAll('.ingredient-row');
+        
+        rows.forEach(row => {
+            row.addEventListener('click', function() {
+                this.classList.toggle('completed');
+            });
+        });
+    });
+</script>