23

assets/css/custom.css

@@ -423,6 +423,7 @@ footer.bg-light {
 /* Make delete recipe button same height as edit button */
 .card .btn.delete-recipe {
     padding: .25rem .5rem;
+    margin-left: 8px;
 }
 
 /* Recipe Card Image */
@@ -504,6 +505,23 @@ footer.bg-light {
         flex-wrap: wrap;
         gap: 0.5rem;
     }
+
+    /* Stack form elements in modals on mobile */
+    #add-product-modal .row .col,
+    #recipe-form-modal .row .col {
+        flex: 1 0 100%; /* Make columns full width */
+    }
+
+    /* Make unit selector more compact on mobile */
+    .unit-selector {
+        justify-content: flex-start;
+        gap: 0.25rem; /* Reduce gap between buttons */
+    }
+
+    .unit-selector .unit-btn {
+        padding: 0.25rem 0.5rem; /* Reduce padding */
+        font-size: 0.8rem; /* Slightly smaller font */
+    }
 }
 
 /* Search Input with Icon */
@@ -517,6 +535,11 @@ footer.bg-light {
         padding-top: 8px;
         padding-bottom: 8px;
     }
+
+    .btn.edit-recipe {
+        padding-left: 16px;
+        padding-right: 16px;
+    }
 }
 
 .search-container .bi-search {