From c7992040a33509dce12d0be37d7938903c2758ad Mon Sep 17 00:00:00 2001
From: Thomas Reitz <T.Reitz@xinion.de>
Date: Mon, 9 Mar 2026 10:36:52 +0100
Subject: [PATCH] feat: display Skills and Languages sections side by side in
 expert profile

Uses CSS Grid two-column layout with responsive fallback to single column on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../frontend/src/profile/ExpertProfileTab.module.css | 12 ++++++++++++
 packages/frontend/src/profile/ExpertProfileTab.tsx   |  7 +++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/profile/ExpertProfileTab.module.css b/packages/frontend/src/profile/ExpertProfileTab.module.css
index b582cb1..c12ad4f 100644
--- a/packages/frontend/src/profile/ExpertProfileTab.module.css
+++ b/packages/frontend/src/profile/ExpertProfileTab.module.css
@@ -4,6 +4,18 @@
   gap: 1.5rem;
 }
 
+.twoColumnRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+@media (max-width: 900px) {
+  .twoColumnRow {
+    grid-template-columns: 1fr;
+  }
+}
+
 .loading {
   text-align: center;
   color: var(--color-text-muted);
diff --git a/packages/frontend/src/profile/ExpertProfileTab.tsx b/packages/frontend/src/profile/ExpertProfileTab.tsx
index 2b7df7b..2362463 100644
--- a/packages/frontend/src/profile/ExpertProfileTab.tsx
+++ b/packages/frontend/src/profile/ExpertProfileTab.tsx
@@ -100,9 +100,12 @@ export function ExpertProfileTab() {
 
   return (
     <div className={styles.expertContainer}>
-      <SkillsSection skills={profile.skills} onUpdate={loadProfile} />
+      {/* Skills + Sprachen nebeneinander */}
+      <div className={styles.twoColumnRow}>
+        <SkillsSection skills={profile.skills} onUpdate={loadProfile} />
+        <LanguagesSection languages={profile.languages} onUpdate={loadProfile} />
+      </div>
       <ExperienceSection experiences={profile.experiences} onUpdate={loadProfile} />
-      <LanguagesSection languages={profile.languages} onUpdate={loadProfile} />
       <ProjectsSection projects={profile.projects} onUpdate={loadProfile} />
       <CertificationsSection certifications={profile.certifications} onUpdate={loadProfile} />
       <AttachmentsSection attachments={profile.attachments} onUpdate={loadProfile} />