fix: UI improvements for unified prompt system (Issue #28)
All checks were successful
Deploy Development / deploy (push) Successful in 49s
Build Test / lint-backend (push) Successful in 1s
Build Test / build-frontend (push) Successful in 13s

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.
This commit is contained in:
Lars 2026-03-25 21:52:58 +01:00
parent 0a3e76128a
commit 7dda520c9b
2 changed files with 28 additions and 4 deletions

View File

@ -390,7 +390,31 @@ export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
style={{ width: '100%', textAlign: 'left', resize: 'vertical', fontFamily: 'monospace', fontSize: 12 }} style={{ width: '100%', textAlign: 'left', resize: 'vertical', fontFamily: 'monospace', fontSize: 12 }}
/> />
<div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 4 }}> <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>
</div> </div>
)} )}
@ -508,7 +532,7 @@ export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
onChange={e => updateStagePrompt(stage.stage, pIdx, 'template', e.target.value)} onChange={e => updateStagePrompt(stage.stage, pIdx, 'template', e.target.value)}
rows={3} rows={3}
placeholder="Inline-Template mit {{placeholders}}..." 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> </div>

View File

@ -227,9 +227,9 @@ export default function AdminPromptsPage() {
background: 'var(--surface)', background: 'var(--surface)',
borderRadius: 12, borderRadius: 12,
border: '1px solid var(--border)', border: '1px solid var(--border)',
overflow: 'hidden' overflowX: 'auto'
}}> }}>
<table style={{ width: '100%', borderCollapse: 'collapse' }}> <table style={{ width: '100%', minWidth: 900, borderCollapse: 'collapse' }}>
<thead> <thead>
<tr style={{ <tr style={{
background: 'var(--surface2)', background: 'var(--surface2)',