Update templates/menu.html

templates/menu.html

@@ -335,15 +335,6 @@ form-check-input addon-option{
 }
      /* Custom Toggle Switch Styling */
 
-/* Flex container to align toggle buttons */
-/* 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;
@@ -357,12 +348,21 @@ form-check-input addon-option{
     cursor: pointer;
     transition: background 0.3s;
     display: inline-block; /* Ensure it is aligned on the same line */
+    margin-right: 10px; /* Space between toggle and text */
 }
 
+/* Make the text aligned correctly with the toggle switch */
+.toggle-container {
+    display: flex;
+    align-items: center;
+}
+
+/* Custom toggle checked style */
 .custom-toggle:checked {
     background: #4caf50; /* Green when checked */
 }
 
+/* Knob of the toggle */
 .custom-toggle:before {
     content: "";
     position: absolute;
@@ -379,6 +379,7 @@ form-check-input addon-option{
     transform: translateX(20px); /* Moves the toggle to the right */
 }
 
+
 /* Optional: Style the labels */
 .form-check-label {
     font-size: 16px;
@@ -465,21 +466,22 @@ form-check-input addon-option{
 <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
     <label class="form-label fw-bold">Filters:</label>
 
-    <!-- Veg Toggle -->
-    <div class="form-check form-check-inline">
-        <input type="checkbox" id="veg-toggle" name="veg"
-            {% if selected_category == "Veg" %}checked{% endif %}
-            class="custom-toggle" onchange="handleToggle('veg')">
-        <label class="form-check-label" for="veg-toggle">Veg Only</label>
-    </div>
+    <div class="toggle-container">
+    <!-- Veg Only Toggle -->
+    <input type="checkbox" id="veg-toggle" name="veg"
+        {% if selected_category == "Veg" %}checked{% endif %}
+        class="custom-toggle" onchange="handleToggle('veg')">
+    <label for="veg-toggle">Veg Only</label>
+</div>
 
+<div class="toggle-container">
     <!-- Customized Dish Toggle -->
-    <div class="form-check form-check-inline">
-        <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
-            {% if selected_category == "Customized Dish" %}checked{% endif %}
-            class="custom-toggle" onchange="handleToggle('custom')">
-        <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
-    </div>
+    <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
+        {% if selected_category == "Customized Dish" %}checked{% endif %}
+        class="custom-toggle" onchange="handleToggle('custom')">
+    <label for="category-CustomizedDish">Customized Dish</label>
+</div>
+
 </form>