Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(CAD-12c): ribbon overflow - dynamic height + scrollable content so all tool groups visible; emoji toggle replaced with text button (Einfach/Pro)

Browse Source
This commit is contained in:
Agent Zero
2026-09-16 01:22:32 +02:00
parent 933dfcbac2
commit c4a76fb74e
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Topbar.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const Topbar: React.FC<TopbarProps> = ({
aria-label={uiMode === 'pro' ? t('mode.toSimple') : t('mode.toPro')} aria-label={uiMode === 'pro' ? t('mode.toSimple') : t('mode.toPro')}
onClick={toggleUIMode} onClick={toggleUIMode}
> >
{uiMode === 'pro' ? '😊' : '🛠'} {uiMode === 'pro' ? 'Einfach' : 'Pro'}
</button> </button>
<button className="icon-btn-top" aria-label="Rückgängig (Strg+Z)" title="Rückgängig (Strg+Z)" onClick={onUndo}> <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> <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>
frontend/src/styles.css
+8 -3
View File
@@ -335,7 +335,10 @@ a:hover { text-decoration: underline; }
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: var(--ribbon-h); height: auto;
min-height: var(--ribbon-h);
max-height: 220px;
overflow-y: auto;
z-index: 25; z-index: 25;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -370,10 +373,12 @@ a:hover { text-decoration: underline; }
.ribbon-content { .ribbon-content {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: flex-start;
padding: 6px 8px; padding: 6px 8px;
gap: var(--spacing-lg); gap: var(--spacing-lg);
overflow: hidden; overflow-x: auto;
overflow-y: hidden;
flex-wrap: wrap;
} }
.ribbon-group { .ribbon-group {
display: flex; display: flex;