From a275cf83e171c3369faf43544501103d53caca0e Mon Sep 17 00:00:00 2001
From: Thomas Reitz <T.Reitz@xinion.de>
Date: Mon, 9 Mar 2026 10:47:31 +0100
Subject: [PATCH] feat: move input forms into section headers for Skills,
 Languages and Experience

Input fields now appear inline next to the section title, matching the
layout pattern used by Projects, Certifications and Attachments sections.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/profile/ExpertProfileTab.module.css   | 46 +++++++++++++
 .../profile/sections/ExperienceSection.tsx    | 68 ++++++++-----------
 .../src/profile/sections/LanguagesSection.tsx | 45 ++++++------
 .../src/profile/sections/SkillsSection.tsx    | 39 ++++++-----
 4 files changed, 113 insertions(+), 85 deletions(-)

diff --git a/packages/frontend/src/profile/ExpertProfileTab.module.css b/packages/frontend/src/profile/ExpertProfileTab.module.css
index c12ad4f..c7619ca 100644
--- a/packages/frontend/src/profile/ExpertProfileTab.module.css
+++ b/packages/frontend/src/profile/ExpertProfileTab.module.css
@@ -54,6 +54,52 @@
   font-size: 1rem;
   font-weight: 600;
   margin: 0;
+  white-space: nowrap;
+}
+
+/* === Header Form (inline neben Titel) === */
+.headerForm {
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+}
+
+.headerForm input,
+.headerForm select {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+}
+
+.headerForm input {
+  max-width: 160px;
+}
+
+.headerForm input:focus,
+.headerForm select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-light);
+}
+
+@media (max-width: 640px) {
+  .sectionHeader {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .headerForm {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .headerForm input {
+    max-width: none;
+    flex: 1;
+    min-width: 120px;
+  }
 }
 
 /* === Chips/Tags === */
diff --git a/packages/frontend/src/profile/sections/ExperienceSection.tsx b/packages/frontend/src/profile/sections/ExperienceSection.tsx
index a61b6bf..e66b1a4 100644
--- a/packages/frontend/src/profile/sections/ExperienceSection.tsx
+++ b/packages/frontend/src/profile/sections/ExperienceSection.tsx
@@ -55,6 +55,35 @@ export function ExperienceSection({ experiences, onUpdate }: ExperienceSectionPr
     <div className={styles.section}>
       <div className={styles.sectionHeader}>
         <h3 className={styles.sectionTitle}>Erfahrung</h3>
+        <form onSubmit={handleAdd} className={styles.headerForm}>
+          <input
+            type="text"
+            value={area}
+            onChange={(e) => setArea(e.target.value)}
+            placeholder="z.B. IT Infrastruktur"
+            maxLength={200}
+            required
+          />
+          <input
+            type="number"
+            value={years}
+            onChange={(e) => setYears(e.target.value)}
+            placeholder="Jahre"
+            min={0}
+            max={60}
+            style={{ width: '70px' }}
+            required
+          />
+          <select value={level} onChange={(e) => setLevel(e.target.value)}>
+            <option value="">Level</option>
+            <option value="Experte">Experte</option>
+            <option value="Fortgeschritten">Fortgeschritten</option>
+            <option value="Grundkenntnisse">Grundkenntnisse</option>
+          </select>
+          <button type="submit" className={styles.btnPrimary} disabled={loading || !area.trim() || !years}>
+            Hinzufügen
+          </button>
+        </form>
       </div>
 
       {error && <div className={styles.error}>{error}</div>}
@@ -85,45 +114,6 @@ export function ExperienceSection({ experiences, onUpdate }: ExperienceSectionPr
       ) : (
         <p className={styles.emptyState}>Noch keine Erfahrung hinzugefügt</p>
       )}
-
-      <form onSubmit={handleAdd} className={styles.addForm}>
-        <div className={styles.fieldInline}>
-          <label>Bereich</label>
-          <input
-            type="text"
-            value={area}
-            onChange={(e) => setArea(e.target.value)}
-            placeholder="z.B. IT Infrastruktur"
-            maxLength={200}
-            required
-          />
-        </div>
-        <div className={styles.fieldInline}>
-          <label>Jahre</label>
-          <input
-            type="number"
-            value={years}
-            onChange={(e) => setYears(e.target.value)}
-            placeholder="0"
-            min={0}
-            max={60}
-            style={{ width: '80px' }}
-            required
-          />
-        </div>
-        <div className={styles.fieldInline}>
-          <label>Level</label>
-          <select value={level} onChange={(e) => setLevel(e.target.value)}>
-            <option value="">– Optional –</option>
-            <option value="Experte">Experte</option>
-            <option value="Fortgeschritten">Fortgeschritten</option>
-            <option value="Grundkenntnisse">Grundkenntnisse</option>
-          </select>
-        </div>
-        <button type="submit" className={styles.btnPrimary} disabled={loading || !area.trim() || !years}>
-          Hinzufügen
-        </button>
-      </form>
     </div>
   );
 }
diff --git a/packages/frontend/src/profile/sections/LanguagesSection.tsx b/packages/frontend/src/profile/sections/LanguagesSection.tsx
index 7cc9f96..c15c663 100644
--- a/packages/frontend/src/profile/sections/LanguagesSection.tsx
+++ b/packages/frontend/src/profile/sections/LanguagesSection.tsx
@@ -54,6 +54,25 @@ export function LanguagesSection({ languages, onUpdate }: LanguagesSectionProps)
     <div className={styles.section}>
       <div className={styles.sectionHeader}>
         <h3 className={styles.sectionTitle}>Sprachen</h3>
+        <form onSubmit={handleAdd} className={styles.headerForm}>
+          <input
+            type="text"
+            value={language}
+            onChange={(e) => setLanguage(e.target.value)}
+            placeholder="z.B. Deutsch"
+            maxLength={100}
+            required
+          />
+          <select value={level} onChange={(e) => setLevel(e.target.value)} required>
+            <option value="">Niveau</option>
+            {LANGUAGE_LEVELS.map((l) => (
+              <option key={l} value={l}>{l}</option>
+            ))}
+          </select>
+          <button type="submit" className={styles.btnPrimary} disabled={loading || !language.trim() || !level}>
+            Hinzufügen
+          </button>
+        </form>
       </div>
 
       {error && <div className={styles.error}>{error}</div>}
@@ -83,32 +102,6 @@ export function LanguagesSection({ languages, onUpdate }: LanguagesSectionProps)
       ) : (
         <p className={styles.emptyState}>Noch keine Sprachen hinzugefügt</p>
       )}
-
-      <form onSubmit={handleAdd} className={styles.addForm}>
-        <div className={styles.fieldInline}>
-          <label>Sprache</label>
-          <input
-            type="text"
-            value={language}
-            onChange={(e) => setLanguage(e.target.value)}
-            placeholder="z.B. Deutsch"
-            maxLength={100}
-            required
-          />
-        </div>
-        <div className={styles.fieldInline}>
-          <label>Niveau</label>
-          <select value={level} onChange={(e) => setLevel(e.target.value)} required>
-            <option value="">Bitte wählen</option>
-            {LANGUAGE_LEVELS.map((l) => (
-              <option key={l} value={l}>{l}</option>
-            ))}
-          </select>
-        </div>
-        <button type="submit" className={styles.btnPrimary} disabled={loading || !language.trim() || !level}>
-          Hinzufügen
-        </button>
-      </form>
     </div>
   );
 }
diff --git a/packages/frontend/src/profile/sections/SkillsSection.tsx b/packages/frontend/src/profile/sections/SkillsSection.tsx
index 56775da..9589110 100644
--- a/packages/frontend/src/profile/sections/SkillsSection.tsx
+++ b/packages/frontend/src/profile/sections/SkillsSection.tsx
@@ -59,6 +59,25 @@ export function SkillsSection({ skills, onUpdate }: SkillsSectionProps) {
     <div className={styles.section}>
       <div className={styles.sectionHeader}>
         <h3 className={styles.sectionTitle}>Skills</h3>
+        <div className={styles.chipInput}>
+          <input
+            type="text"
+            value={newSkill}
+            onChange={(e) => setNewSkill(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Neuer Skill..."
+            maxLength={100}
+            disabled={loading}
+          />
+          <button
+            type="button"
+            className={styles.btnPrimary}
+            onClick={handleAdd}
+            disabled={loading || !newSkill.trim()}
+          >
+            Hinzufügen
+          </button>
+        </div>
       </div>
 
       {error && <div className={styles.error}>{error}</div>}
@@ -83,26 +102,6 @@ export function SkillsSection({ skills, onUpdate }: SkillsSectionProps) {
       ) : (
         <p className={styles.emptyState}>Noch keine Skills hinzugefügt</p>
       )}
-
-      <div className={styles.chipInput}>
-        <input
-          type="text"
-          value={newSkill}
-          onChange={(e) => setNewSkill(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Neuer Skill..."
-          maxLength={100}
-          disabled={loading}
-        />
-        <button
-          type="button"
-          className={styles.btnPrimary}
-          onClick={handleAdd}
-          disabled={loading || !newSkill.trim()}
-        >
-          Hinzufügen
-        </button>
-      </div>
     </div>
   );
 }