fix: improve UI elements in recipe editor

- Center isBaseRecipe toggle by changing display to inline-flex
- Fix note field editing by adding textarea with bindable value
- Clear instruction step input after submission instead of restoring placeholder
- Style note textarea with transparent background and lighter placeholder text

The instruction field now properly clears on submission, while ingredient fields retain their previous values.

src/lib/components/CreateStepList.svelte

@@ -247,7 +247,8 @@ export function add_new_step(){
 		instructions[list_index].steps.push(new_step.step)
 	}
 	const el = document.querySelector("#step")
-	el.innerHTML = step_placeholder
+	el.innerHTML = ""
+	new_step.step = ""
 	instructions = instructions //tells svelte to update dom
 }
 

src/lib/components/EditRecipeNote.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	let { note = $bindable("") } = $props<{ note?: string }>();
 </script>
 <style>
 div{
@@ -14,9 +15,25 @@ div{
 h3{
 	margin-block: 0;
 }
+textarea {
+	width: 100%;
+	min-height: 80px;
+	padding: 0.5em;
+	border-radius: 5px;
+	border: none;
+	color: white;
+	font-size: 1rem;
+	resize: vertical;
+	margin-top: 0.5em;
+	font-family: sans-serif;
+	background-color: transparent;
+}
+textarea::placeholder {
+	color: rgba(255, 255, 255, 0.6);
+}
 </style>
 
 <div>
 	<h3>Notiz:</h3>
-	<slot></slot>
+	<textarea bind:value={note} placeholder="Füge eine Notiz für dieses Rezept hinzu..."></textarea>
 </div>

src/lib/components/Toggle.svelte

@@ -4,7 +4,7 @@
 
 <style>
 .toggle-wrapper {
-	display: flex;
+	display: inline-flex;
 }
 
 .toggle-wrapper label {