padding change

src/pages/recipe/new.astro

@@ -42,7 +42,7 @@ async function submitRecipe() {
 
             <div class="flex flex-row align-middle items-center">
                 <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
-                <button disabled class="disabled:text-white/20 ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
+                <button disabled class="disabled:text-white/20 transition-colors ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>
@@ -55,7 +55,7 @@ async function submitRecipe() {
                 <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-white/10">
                     <tr id="ingredient-input" class="">
                         <td class="px-2 py-1">
-                            <input id="ing-qty" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
+                            <input id="ing-qty" class="w-full h-9 my-1 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
                         </td>
                         <td class="px-2 py-1">
                             <input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
@@ -85,7 +85,7 @@ async function submitRecipe() {
                     />
             </div>
 
-            <button disabled class="disabled:text-white/20 ml-auto mb-2 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
+            <button disabled class="disabled:text-white/20 ml-auto mb-2 transition-colors text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
 
             <ul id="step-list"></ul>
         </div>

src/script/newRecipe.ts

@@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', function() {
     })
     // onclick for add button
     document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
-    
+
     // Enter key navigation for ingredient fields
     ingredientFields[0].addEventListener('keydown', e => {
         if (e.key === 'Enter') {
@@ -95,6 +95,7 @@ function addStep() {
     renderSteps()
     stepInput.value = ''
     stepAddButton.disabled = true
+    stepInput.focus()
 }
 
 function renderSteps() {