From 296201eee5aec45e01c8f8d575e66c6de33ad056 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 13 Jan 2026 19:14:25 +0100
Subject: [PATCH] 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 |  3 ++-
 src/lib/components/EditRecipeNote.svelte | 19 ++++++++++++++++++-
 src/lib/components/Toggle.svelte         |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/CreateStepList.svelte b/src/lib/components/CreateStepList.svelte
index 1a88250..ca089fe 100644
--- a/src/lib/components/CreateStepList.svelte
+++ b/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
 }
 
diff --git a/src/lib/components/EditRecipeNote.svelte b/src/lib/components/EditRecipeNote.svelte
index a4e55d6..36102cc 100644
--- a/src/lib/components/EditRecipeNote.svelte
+++ b/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>
diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index 53522f6..3f0e834 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -4,7 +4,7 @@
 
 <style>
 .toggle-wrapper {
-	display: flex;
+	display: inline-flex;
 }
 
 .toggle-wrapper label {