From 7dda520c9bbcfd0c212bb3d3cc59218a507b6105 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Wed, 25 Mar 2026 21:52:58 +0100
Subject: [PATCH] fix: UI improvements for unified prompt system (Issue #28)

Fixes:
1. Template field in stages now full width (was too narrow)
2. Table horizontal scrollbar for mobile (overflow-x: auto)
3. Table min-width 900px to prevent icon clipping
4. Added clickable placeholder chips below base template
   - Click to insert placeholders into template
   - Shows: weight_data, nutrition_data, activity_data, sleep_data, etc.

UI now mobile-ready and more user-friendly.
---
 .../src/components/UnifiedPromptModal.jsx     | 28 +++++++++++++++++--
 frontend/src/pages/AdminPromptsPage.jsx       |  4 +--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/UnifiedPromptModal.jsx b/frontend/src/components/UnifiedPromptModal.jsx
index ff17bfb..a8c1af0 100644
--- a/frontend/src/components/UnifiedPromptModal.jsx
+++ b/frontend/src/components/UnifiedPromptModal.jsx
@@ -390,7 +390,31 @@ export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
               style={{ width: '100%', textAlign: 'left', resize: 'vertical', fontFamily: 'monospace', fontSize: 12 }}
             />
             <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 4 }}>
-              Verwende {'{{'} und {'}}'}  für Platzhalter (z.B. weight_data, nutrition_data)
+              <div style={{ marginBottom: 4 }}>
+                Verwende {'{{'} und {'}}'}  für Platzhalter:
+              </div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                {['weight_data', 'nutrition_data', 'activity_data', 'sleep_data', 'vitals_baseline', 'blood_pressure', 'profile_id', 'today'].map(ph => (
+                  <code
+                    key={ph}
+                    onClick={() => {
+                      const placeholder = `{{${ph}}}`
+                      setTemplate(template + placeholder)
+                    }}
+                    style={{
+                      padding: '2px 6px',
+                      background: 'var(--surface2)',
+                      borderRadius: 4,
+                      fontSize: 10,
+                      cursor: 'pointer',
+                      border: '1px solid var(--border)'
+                    }}
+                    title="Klicken zum Einfügen"
+                  >
+                    {'{{'}{ph}{'}}'}
+                  </code>
+                ))}
+              </div>
             </div>
           </div>
         )}
@@ -508,7 +532,7 @@ export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
                           onChange={e => updateStagePrompt(stage.stage, pIdx, 'template', e.target.value)}
                           rows={3}
                           placeholder="Inline-Template mit {{placeholders}}..."
-                          style={{ fontSize: 12, textAlign: 'left', resize: 'vertical', fontFamily: 'monospace' }}
+                          style={{ width: '100%', fontSize: 12, textAlign: 'left', resize: 'vertical', fontFamily: 'monospace' }}
                         />
                       )}
                     </div>
diff --git a/frontend/src/pages/AdminPromptsPage.jsx b/frontend/src/pages/AdminPromptsPage.jsx
index 1427699..dfcd746 100644
--- a/frontend/src/pages/AdminPromptsPage.jsx
+++ b/frontend/src/pages/AdminPromptsPage.jsx
@@ -227,9 +227,9 @@ export default function AdminPromptsPage() {
           background: 'var(--surface)',
           borderRadius: 12,
           border: '1px solid var(--border)',
-          overflow: 'hidden'
+          overflowX: 'auto'
         }}>
-          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          <table style={{ width: '100%', minWidth: 900, borderCollapse: 'collapse' }}>
             <thead>
               <tr style={{
                 background: 'var(--surface2)',