From ce29b7b75d0a8d0cb9b90e6b46ec6fd4019944ac Mon Sep 17 00:00:00 2001
From: traxys <quentin+dev@familleboyer.net>
Date: Fri, 30 Jun 2023 13:21:37 +0200
Subject: [PATCH] app: Better handle ingredient selection form

---
 app/src/recipe_creator.rs | 62 +++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/app/src/recipe_creator.rs b/app/src/recipe_creator.rs
index 0febd41..4001f5a 100644
--- a/app/src/recipe_creator.rs
+++ b/app/src/recipe_creator.rs
@@ -118,35 +118,41 @@ pub(super) fn IngredientSelectBase(props: &IngredientSelectBaseProps) -> HtmlRes
                         </div>
                     }
                     <script src="/awesomplete.min.js" async=true></script>
-                    <div class="d-flex align-items-center mb-1">
-                        <label for="igSelect" class="pe-1">{"Name:"}</label>
-                        <input
-                            class="awesomplete form-control"
-                            list="igList"
-                            value={input_value}
-                            {onchange}
-                            id="igSelect"
-                        />
-                        <datalist id="igList">
-                            { for ig.keys().map(|k| html!{<option key={k.clone()}>{k}</option>}) }
-                        </datalist>
-                    </div>
-                    <div class="d-flex mw-50 align-items-center">
-                        <label for="igAmount" class="px-1">{"Amount: "}</label>
-                        <div class="input-group">
-                            <input
-                                class="form-control"
-                                type="number"
-                                id="igAmount"
-                                min="0"
-                                value={props.amount.map(|v| v.to_string())}
-                                onchange={am_change}
-                            />
-                            if let Some(unit) = &*unit {
-                                <span class="input-group-text">{unit}</span>
-                            }
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-sm-6 d-flex align-items-center mb-1">
+                                <label for="igSelect" class="pe-1">{"Name:"}</label>
+                                <input
+                                    class="awesomplete form-control"
+                                    list="igList"
+                                    value={input_value}
+                                    {onchange}
+                                    id="igSelect"
+                                />
+                                <datalist id="igList">
+                                    { for ig.keys().map(|k| html!{<option key={k.clone()}>{k}</option>}) }
+                                </datalist>
+                            </div>
+                            <div class="col-sm-6 d-flex align-items-center">
+                                <label for="igAmount" class="px-1">{"Amount: "}</label>
+                                <div class="input-group">
+                                    <input
+                                        class="form-control"
+                                        type="number"
+                                        id="igAmount"
+                                        min="0"
+                                        value={props.amount.map(|v| v.to_string())}
+                                        onchange={am_change}
+                                    />
+                                    if let Some(unit) = &*unit {
+                                        <span class="input-group-text">{unit}</span>
+                                    }
+                                </div>
+                            </div>
+                            <div class="col-sm">
+                                {props.children.clone()}
+                            </div>
                         </div>
-                        {props.children.clone()}
                     </div>
                 </div>
             })