From 43b74dc3c246737494ce37786cf2a18c19d96706 Mon Sep 17 00:00:00 2001
From: moerp <matthias.hottgenroth@icloud.com>
Date: Thu, 4 Apr 2024 13:29:03 +0200
Subject: [PATCH] style

---
 src/static/style.css     | 11 ++++++++++-
 src/templates/index.html | 32 ++++++++++++++++++--------------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/static/style.css b/src/static/style.css
index c647785..1459b75 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -231,4 +231,13 @@ button#cancel-button:disabled {
 
 button#cancel-button:not(:disabled):hover {
     background-color: #490000; /* Dunkleres Rot */
-}
\ No newline at end of file
+}
+
+.form-layout {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-row {
+    margin-bottom: 10px;
+}
diff --git a/src/templates/index.html b/src/templates/index.html
index 702ee6f..1ae8aac 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -240,21 +240,25 @@ function updateTotalNutrition() {
     
     
     <div class="content">
-        <form onsubmit="event.preventDefault(); addProduct();" id="product-form">
-            <input type="number" id="portions" name="portions" placeholder="Portionen" min="1" value="1" oninput="recalculateTableBasedOnPortions()">
-            
-            <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>
-            <input type="number" id="weight" name="weight" placeholder="Gramm" oninput="updateButtonState()">
-            <button type="submit" id="submit-button" disabled>Hinzufügen</button>
-
-
-
-            
+        <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>