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.
This commit is contained in:
parent
0a3e76128a
commit
7dda520c9b
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user