From c4a76fb74ecfaa5d69cd74ade1f7e9acc0fce6ff Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Wed, 16 Sep 2026 01:22:32 +0200
Subject: [PATCH] fix(CAD-12c): ribbon overflow - dynamic height + scrollable
 content so all tool groups visible; emoji toggle replaced with text button
 (Einfach/Pro)

---
 frontend/src/components/Topbar.tsx |  2 +-
 frontend/src/styles.css            | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Topbar.tsx b/frontend/src/components/Topbar.tsx
index 197f88f..d956d0a 100644
--- a/frontend/src/components/Topbar.tsx
+++ b/frontend/src/components/Topbar.tsx
@@ -45,7 +45,7 @@ const Topbar: React.FC<TopbarProps> = ({
           aria-label={uiMode === 'pro' ? t('mode.toSimple') : t('mode.toPro')}
           onClick={toggleUIMode}
         >
-          {uiMode === 'pro' ? '😊' : '🛠'}
+          {uiMode === 'pro' ? 'Einfach' : 'Pro'}
         </button>
         <button className="icon-btn-top" aria-label="Rückgängig (Strg+Z)" title="Rückgängig (Strg+Z)" onClick={onUndo}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index ae5c1e7..e8ae963 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -335,7 +335,10 @@ a:hover { text-decoration: underline; }
   border-bottom: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
-  height: var(--ribbon-h);
+  height: auto;
+  min-height: var(--ribbon-h);
+  max-height: 220px;
+  overflow-y: auto;
   z-index: 25;
   flex-shrink: 0;
 }
@@ -370,10 +373,12 @@ a:hover { text-decoration: underline; }
 .ribbon-content {
   flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   padding: 6px 8px;
   gap: var(--spacing-lg);
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-wrap: wrap;
 }
 .ribbon-group {
   display: flex;