From 7a8a5aee989ba5488c56b950798d9a52a971022f Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Tue, 24 Mar 2026 20:53:15 +0100
Subject: [PATCH] fix: prompt editor layout - full-width inputs, left-aligned
 text (Issue #28)

- PromptEditModal: all inputs/textareas now full-width
- Labels positioned above fields (not inline)
- Text left-aligned (was right-aligned)
- Added resize:vertical for textareas
- Side-by-side comparison with word-wrap
- Follows app-wide form design pattern

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/PromptEditModal.jsx | 26 ++++++++++++++-------
 frontend/src/components/PromptGenerator.jsx |  7 +++---
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/PromptEditModal.jsx b/frontend/src/components/PromptEditModal.jsx
index 75e50a5..b1f4a64 100644
--- a/frontend/src/components/PromptEditModal.jsx
+++ b/frontend/src/components/PromptEditModal.jsx
@@ -181,46 +181,52 @@ export default function PromptEditModal({ prompt, onSave, onClose }) {
         </div>
 
         {/* Form Fields */}
-        <div style={{display:'grid', gap:16, marginBottom:24}}>
+        <div style={{display:'grid', gap:20, marginBottom:24}}>
           <div>
-            <label className="form-label">Titel *</label>
+            <label className="form-label" style={{display:'block', marginBottom:6}}>Titel *</label>
             <input
               className="form-input"
               value={name}
               onChange={e => setName(e.target.value)}
               placeholder="z.B. Protein-Analyse"
+              style={{width:'100%', textAlign:'left'}}
             />
           </div>
 
           {!prompt?.id && (
             <div>
-              <label className="form-label">Slug * (eindeutig, keine Leerzeichen)</label>
+              <label className="form-label" style={{display:'block', marginBottom:6}}>
+                Slug * (eindeutig, keine Leerzeichen)
+              </label>
               <input
                 className="form-input"
                 value={slug}
                 onChange={e => setSlug(e.target.value)}
                 placeholder="z.B. protein_analyse"
+                style={{width:'100%', textAlign:'left'}}
               />
             </div>
           )}
 
           <div>
-            <label className="form-label">Beschreibung</label>
+            <label className="form-label" style={{display:'block', marginBottom:6}}>Beschreibung</label>
             <textarea
               className="form-input"
               value={description}
               onChange={e => setDescription(e.target.value)}
               rows={2}
               placeholder="Wofür ist dieser Prompt? (für Admin sichtbar)"
+              style={{width:'100%', textAlign:'left', resize:'vertical'}}
             />
           </div>
 
           <div>
-            <label className="form-label">Kategorie</label>
+            <label className="form-label" style={{display:'block', marginBottom:6}}>Kategorie</label>
             <select
               className="form-select"
               value={category}
               onChange={e => setCategory(e.target.value)}
+              style={{width:'100%'}}
             >
               {categories.map(cat => (
                 <option key={cat.id} value={cat.id}>{cat.label}</option>
@@ -229,14 +235,14 @@ export default function PromptEditModal({ prompt, onSave, onClose }) {
           </div>
 
           <div>
-            <label className="form-label">Template *</label>
+            <label className="form-label" style={{display:'block', marginBottom:6}}>Template *</label>
             <textarea
               className="form-input"
               value={template}
               onChange={e => setTemplate(e.target.value)}
               rows={15}
               placeholder="Du bist ein Ernährungsexperte. Analysiere folgende Daten: {{nutrition_summary}}"
-              style={{fontFamily:'monospace', fontSize:12}}
+              style={{width:'100%', textAlign:'left', fontFamily:'monospace', fontSize:12, resize:'vertical'}}
             />
             <div style={{fontSize:11, color:'var(--text3)', marginTop:4}}>
               Nutze Platzhalter wie {`{{weight_aktuell}}`}, {`{{protein_avg}}`}, etc.
@@ -326,7 +332,8 @@ export default function PromptEditModal({ prompt, onSave, onClose }) {
                   <strong>Original:</strong>
                   <pre style={{
                     marginTop:4, padding:12, background:'var(--surface2)',
-                    borderRadius:8, fontSize:11, maxHeight:200, overflow:'auto'
+                    borderRadius:8, fontSize:11, maxHeight:200, overflow:'auto',
+                    whiteSpace:'pre-wrap', wordBreak:'break-word'
                   }}>
                     {template}
                   </pre>
@@ -335,7 +342,8 @@ export default function PromptEditModal({ prompt, onSave, onClose }) {
                   <strong>Optimiert:</strong>
                   <pre style={{
                     marginTop:4, padding:12, background:'#d4edda',
-                    borderRadius:8, fontSize:11, maxHeight:200, overflow:'auto'
+                    borderRadius:8, fontSize:11, maxHeight:200, overflow:'auto',
+                    whiteSpace:'pre-wrap', wordBreak:'break-word'
                   }}>
                     {optimization.optimized_prompt}
                   </pre>
diff --git a/frontend/src/components/PromptGenerator.jsx b/frontend/src/components/PromptGenerator.jsx
index 534123c..bd7dd84 100644
--- a/frontend/src/components/PromptGenerator.jsx
+++ b/frontend/src/components/PromptGenerator.jsx
@@ -79,7 +79,7 @@ export default function PromptGenerator({ onGenerated, onClose }) {
 
         {/* Step 1: Goal */}
         <div style={{marginBottom:24}}>
-          <label className="form-label">
+          <label className="form-label" style={{display:'block', marginBottom:6}}>
             1️⃣ Was möchtest du analysieren?
           </label>
           <textarea
@@ -88,6 +88,7 @@ export default function PromptGenerator({ onGenerated, onClose }) {
             onChange={e => setGoal(e.target.value)}
             rows={3}
             placeholder="Beispiel: Ich möchte wissen ob meine Proteinzufuhr ausreichend ist für Muskelaufbau und wie ich sie optimieren kann."
+            style={{width:'100%', textAlign:'left', resize:'vertical'}}
           />
         </div>
 
@@ -145,7 +146,7 @@ export default function PromptGenerator({ onGenerated, onClose }) {
 
         {/* Step 3: Desired Format */}
         <div style={{marginBottom:24}}>
-          <label className="form-label">
+          <label className="form-label" style={{display:'block', marginBottom:6}}>
             3️⃣ Gewünschtes Antwort-Format (optional)
           </label>
           <textarea
@@ -154,7 +155,7 @@ export default function PromptGenerator({ onGenerated, onClose }) {
             onChange={e => setExampleOutput(e.target.value)}
             rows={4}
             placeholder={'Beispiel:\n## Analyse\n[Bewertung]\n\n## Empfehlungen\n- Punkt 1\n- Punkt 2'}
-            style={{fontFamily:'monospace', fontSize:12}}
+            style={{width:'100%', textAlign:'left', fontFamily:'monospace', fontSize:12, resize:'vertical'}}
           />
         </div>