Update templates/menu.html

templates/menu.html

@@ -334,7 +334,16 @@ form-check-input addon-option{
     border-color: #388E3C;
 }
      /* Custom Toggle Switch Styling */
-/* Custom Square Toggle Switch Styling */
+
+/* Flex container to align toggle buttons */
+.toggle-container {
+    display: flex;
+    justify-content: flex-start; /* Align buttons to the left */
+    gap: 20px; /* Adjust space between buttons */
+    margin: 0 auto; /* Center align the container if required */
+}
+
+/* Custom Toggle Switch Styling */
 .custom-toggle {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -369,6 +378,7 @@ form-check-input addon-option{
 }
 
 
+
 /* Optional: Style the labels */
 .form-check-label {
     font-size: 16px;
@@ -456,20 +466,23 @@ form-check-input addon-option{
 <form method="get" action="/menu" class="text-center mb-4">
     <label class="form-label fw-bold">Select a Category:</label>
 
-    <!-- Veg Toggle Button -->
-    <div class="form-check form-check-inline">
-        <input type="radio" id="category-Veg" name="category" value="Veg"
-            class="custom-toggle"
-            {% if selected_category == "Veg" %}checked{% endif %} onchange="this.form.submit()">
-        <label class="form-check-label" for="category-Veg">Veg</label>
-    </div>
+    <!-- Wrapper for the toggle buttons -->
+    <div class="toggle-container">
+        <!-- Veg Toggle Button -->
+        <div class="form-check form-check-inline">
+            <input type="radio" id="category-Veg" name="category" value="Veg"
+                class="custom-toggle"
+                {% if selected_category == "Veg" %}checked{% endif %} onchange="this.form.submit()">
+            <label class="form-check-label" for="category-Veg">Veg</label>
+        </div>
 
-    <!-- Customized Dish Toggle Button -->
-    <div class="form-check form-check-inline">
-        <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
-            class="custom-toggle"
-            {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
-        <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
+        <!-- Customized Dish Toggle Button -->
+        <div class="form-check form-check-inline">
+            <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
+                class="custom-toggle"
+                {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
+            <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
+        </div>
     </div>
 
     <!-- Non-Veg logic handled in backend but not displayed in UI -->
@@ -477,6 +490,7 @@ form-check-input addon-option{
 </form>
 
 
+
   
   <!-- Show menu items only when Customized Dish is not selected -->
     <div class="container mt-4">