style

src/static/style.css

@@ -232,3 +232,12 @@ button#cancel-button:disabled {
 button#cancel-button:not(:disabled):hover {
     background-color: #490000; /* Dunkleres Rot */
 }
+
+.form-layout {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-row {
+    margin-bottom: 10px;
+}

src/templates/index.html

@@ -240,22 +240,26 @@ function updateTotalNutrition() {
     
     
     <div class="content">
-        <form onsubmit="event.preventDefault(); addProduct();" id="product-form">
+        <form onsubmit="event.preventDefault(); addProduct();" id="product-form" class="form-layout">
+            <div class="form-row">
                 <input type="number" id="portions" name="portions" placeholder="Portionen" min="1" value="1" oninput="recalculateTableBasedOnPortions()">
-            
+            </div>
+            <div class="form-row">
                 <label for="my_combobox">Wählen Sie ein Lebensmittel</label>
                 <input list="products" name="my_combobox" id="my_combobox" placeholder="Lebensmittel" oninput="updateButtonState()" autocomplete="off">
                 <datalist id="products">
                     <!-- Produkte werden hier dynamisch eingefügt -->
                 </datalist>
+            </div>
+            <div class="form-row">
                 <input type="number" id="weight" name="weight" placeholder="Gramm" oninput="updateButtonState()">
+            </div>
+            <div class="form-row">
                 <button type="submit" id="submit-button" disabled>Hinzufügen</button>
-
-
-
-            
+            </div>
         </form>
         
+    
         <table id="nutrition-table">
             <tr>
                 <th>Lebensmittel</th>