From 75f0a5dd6e88875baebe678d762fd0586d12f80d Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Thu, 26 Mar 2026 16:32:37 +0100
Subject: [PATCH] refactor: mobile-friendly goal form design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Full-width inputs throughout the form
- Labels above inputs (mobile best practice)
- Section headers with emoji (🎯 Zielwert)
- Consistent spacing (marginBottom: 16)
- Read-only unit display as styled badge
- Primary goal checkbox in highlighted section
- Full-width buttons (btn-full class)
- Scrollable modal with top padding
- Error display above form

Matches VitalsPage design pattern for consistency.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/GoalsPage.jsx | 279 ++++++++++++++++++++-----------
 1 file changed, 186 insertions(+), 93 deletions(-)

diff --git a/frontend/src/pages/GoalsPage.jsx b/frontend/src/pages/GoalsPage.jsx
index d24d35f..bded3b3 100644
--- a/frontend/src/pages/GoalsPage.jsx
+++ b/frontend/src/pages/GoalsPage.jsx
@@ -440,120 +440,213 @@ export default function GoalsPage() {
           bottom: 0,
           background: 'rgba(0,0,0,0.5)',
           display: 'flex',
-          alignItems: 'center',
+          alignItems: 'flex-start',
           justifyContent: 'center',
           zIndex: 1000,
-          padding: 16
+          padding: 16,
+          paddingTop: 40,
+          overflowY: 'auto'
         }}>
           <div className="card" style={{
             maxWidth: 500,
             width: '100%',
-            maxHeight: '90vh',
-            overflow: 'auto'
+            marginBottom: 40
           }}>
-            <h2 style={{ marginTop: 0 }}>
+            <div className="card-title">
               {editingGoal ? 'Ziel bearbeiten' : 'Neues Ziel'}
-            </h2>
+            </div>
 
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-              <div>
-                <label className="form-label">Zieltyp</label>
-                <select
-                  className="form-input"
-                  value={formData.goal_type}
-                  onChange={e => handleGoalTypeChange(e.target.value)}
-                >
-                  {Object.entries(GOAL_TYPES).map(([key, info]) => (
-                    <option key={key} value={key}>
-                      {info.icon} {info.label}
-                    </option>
-                  ))}
-                </select>
+            {error && (
+              <div style={{
+                padding: 10,
+                background: '#FCEBEB',
+                border: '1px solid #D85A30',
+                borderRadius: 8,
+                fontSize: 13,
+                color: '#D85A30',
+                marginBottom: 16
+              }}>
+                {error}
               </div>
+            )}
 
-              <div>
-                <label className="form-label">Name (optional)</label>
+            {/* Zieltyp */}
+            <div style={{ marginBottom: 16 }}>
+              <label style={{
+                display: 'block',
+                fontSize: 13,
+                fontWeight: 600,
+                marginBottom: 4,
+                color: 'var(--text2)'
+              }}>
+                Zieltyp
+              </label>
+              <select
+                className="form-input"
+                style={{ width: '100%' }}
+                value={formData.goal_type}
+                onChange={e => handleGoalTypeChange(e.target.value)}
+              >
+                {Object.entries(GOAL_TYPES).map(([key, info]) => (
+                  <option key={key} value={key}>
+                    {info.icon} {info.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Name */}
+            <div style={{ marginBottom: 16 }}>
+              <label style={{
+                display: 'block',
+                fontSize: 13,
+                fontWeight: 500,
+                marginBottom: 4,
+                color: 'var(--text2)'
+              }}>
+                Name (optional)
+              </label>
+              <input
+                type="text"
+                className="form-input"
+                style={{ width: '100%' }}
+                value={formData.name}
+                onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
+                placeholder="z.B. Sommerfigur 2026"
+              />
+            </div>
+
+            {/* Zielwert */}
+            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8, marginTop: 20, color: 'var(--text1)' }}>
+              🎯 Zielwert
+            </div>
+            <div style={{ marginBottom: 16 }}>
+              <label style={{
+                display: 'block',
+                fontSize: 13,
+                fontWeight: 500,
+                marginBottom: 4,
+                color: 'var(--text2)'
+              }}>
+                Wert *
+              </label>
+              <div style={{ display: 'flex', gap: 8 }}>
                 <input
-                  type="text"
+                  type="number"
+                  step="0.01"
                   className="form-input"
-                  value={formData.name}
-                  onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
-                  placeholder="z.B. Sommerfigur 2026"
+                  style={{ flex: 1 }}
+                  value={formData.target_value}
+                  onChange={e => setFormData(f => ({ ...f, target_value: e.target.value }))}
+                  placeholder="Zielwert eingeben"
                 />
-              </div>
-
-              <div>
-                <label className="form-label">Zielwert *</label>
-                <div style={{ display: 'flex', gap: 8 }}>
-                  <input
-                    type="number"
-                    step="0.01"
-                    className="form-input"
-                    value={formData.target_value}
-                    onChange={e => setFormData(f => ({ ...f, target_value: e.target.value }))}
-                    placeholder="Zielwert"
-                  />
-                  <input
-                    type="text"
-                    className="form-input"
-                    value={formData.unit}
-                    readOnly
-                    style={{ width: 80 }}
-                  />
+                <div style={{
+                  padding: '8px 16px',
+                  background: 'var(--surface2)',
+                  border: '1px solid var(--border)',
+                  borderRadius: 8,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: 'var(--text2)',
+                  minWidth: 70,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}>
+                  {formData.unit}
                 </div>
               </div>
+            </div>
 
-              <div>
-                <label className="form-label">Zieldatum (optional)</label>
+            {/* Zieldatum */}
+            <div style={{ marginBottom: 16 }}>
+              <label style={{
+                display: 'block',
+                fontSize: 13,
+                fontWeight: 500,
+                marginBottom: 4,
+                color: 'var(--text2)'
+              }}>
+                Zieldatum (optional)
+              </label>
+              <input
+                type="date"
+                className="form-input"
+                style={{ width: '100%' }}
+                value={formData.target_date}
+                onChange={e => setFormData(f => ({ ...f, target_date: e.target.value }))}
+              />
+            </div>
+
+            {/* Beschreibung */}
+            <div style={{ marginBottom: 16 }}>
+              <label style={{
+                display: 'block',
+                fontSize: 13,
+                fontWeight: 500,
+                marginBottom: 4,
+                color: 'var(--text2)'
+              }}>
+                Beschreibung (optional)
+              </label>
+              <textarea
+                className="form-input"
+                style={{ width: '100%', minHeight: 80 }}
+                value={formData.description}
+                onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
+                rows={3}
+                placeholder="Warum ist dir dieses Ziel wichtig?"
+              />
+            </div>
+
+            {/* Primärziel */}
+            <div style={{
+              padding: 12,
+              background: 'var(--surface2)',
+              borderRadius: 8,
+              marginBottom: 20
+            }}>
+              <label style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: 10,
+                cursor: 'pointer'
+              }}>
                 <input
-                  type="date"
-                  className="form-input"
-                  value={formData.target_date}
-                  onChange={e => setFormData(f => ({ ...f, target_date: e.target.value }))}
+                  type="checkbox"
+                  checked={formData.is_primary}
+                  onChange={e => setFormData(f => ({ ...f, is_primary: e.target.checked }))}
+                  style={{ marginTop: 2 }}
                 />
-              </div>
-
-              <div>
-                <label className="form-label">Beschreibung (optional)</label>
-                <textarea
-                  className="form-input"
-                  value={formData.description}
-                  onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
-                  rows={3}
-                  placeholder="Warum ist dir dieses Ziel wichtig?"
-                />
-              </div>
-
-              <div>
-                <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
-                  <input
-                    type="checkbox"
-                    checked={formData.is_primary}
-                    onChange={e => setFormData(f => ({ ...f, is_primary: e.target.checked }))}
-                  />
-                  <span>Als Primärziel setzen</span>
-                </label>
-                <p style={{ fontSize: 12, color: 'var(--text2)', marginTop: 4, marginLeft: 24 }}>
-                  Dein Primärziel hat höchste Priorität in Analysen und Charts
-                </p>
-              </div>
+                <div>
+                  <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>
+                    Als Primärziel setzen
+                  </div>
+                  <div style={{ fontSize: 12, color: 'var(--text2)' }}>
+                    Dein Primärziel hat höchste Priorität in Analysen und Charts
+                  </div>
+                </div>
+              </label>
             </div>
 
-            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
-              <button className="btn-primary" onClick={handleSaveGoal} style={{ flex: 1 }}>
-                {editingGoal ? 'Aktualisieren' : 'Erstellen'}
-              </button>
-              <button
-                className="btn-secondary"
-                onClick={() => {
-                  setShowGoalForm(false)
-                  setEditingGoal(null)
-                }}
-                style={{ flex: 1 }}
-              >
-                Abbrechen
-              </button>
-            </div>
+            {/* Buttons */}
+            <button
+              className="btn btn-primary btn-full"
+              onClick={handleSaveGoal}
+              style={{ marginBottom: 8 }}
+            >
+              {editingGoal ? 'Aktualisieren' : 'Ziel erstellen'}
+            </button>
+            <button
+              className="btn btn-secondary btn-full"
+              onClick={() => {
+                setShowGoalForm(false)
+                setEditingGoal(null)
+                setError(null)
+              }}
+            >
+              Abbrechen
+            </button>
           </div>
         </div>
       )}