diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx index c6c1b72..3c3cf7e 100644 --- a/src/OberleisteApp.jsx +++ b/src/OberleisteApp.jsx @@ -64,11 +64,11 @@ function parseScale(input) { // Caret rechts — alle in einem rechteckigen Container, sichtbare Trennung // zwischen Icon-Kompartiment und Inhalt. -const PILL_H = 18 // alte Pill-Hoehe (Buttons/Chips die nicht migriert sind) -const BAR_H = 20 // neue Widget-Hoehe (BarSelect, BarButton, BarGroup) +const PILL_H = 20 // alte Pill-Hoehe (Buttons/Chips die nicht migriert sind) +const BAR_H = 22 // neue Widget-Hoehe (BarSelect, BarButton, BarGroup) const sep = { - width: 1, height: 18, + width: 1, height: 20, background: 'var(--border)', flexShrink: 0, margin: '0 3px', } @@ -110,12 +110,12 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children, jo borderTopRightRadius: joinedRight ? 0 : 999, borderBottomRightRadius: joinedRight ? 0 : 999, borderRight: joinedRight ? 'none' : '1px solid var(--border)', - padding: '0 22px 0 10px', - fontSize: 10, fontFamily: 'var(--font)', + padding: '0 24px 0 12px', + fontSize: 11, fontFamily: 'var(--font)', appearance: 'none', WebkitAppearance: 'none', backgroundImage: 'var(--select-arrow)', backgroundRepeat: 'no-repeat', - backgroundPosition: 'right 8px center', + backgroundPosition: 'right 9px center', cursor: disabled ? 'not-allowed' : 'pointer', flexShrink: 0, outline: 'none', letterSpacing: 0, @@ -143,7 +143,7 @@ function BarButton({ icon, onClick, title, disabled, active, joinedLeft }) { opacity: disabled ? 0.5 : 1, flexShrink: 0, padding: 0, }}> - ) @@ -305,7 +305,7 @@ export default function OberleisteApp() { > setView(v.value)} title={`Ansicht ${v.label}`} style={{ - height: BAR_H, padding: '0 8px', + height: BAR_H, padding: '0 10px', background: isActive ? 'var(--accent)' : 'var(--bg-item)', color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)', border: '1px solid var(--border)', @@ -349,12 +349,12 @@ export default function OberleisteApp() { borderBottomLeftRadius: isFirst ? 999 : 0, borderTopRightRadius: isLast ? 999 : 0, borderBottomRightRadius: isLast ? 999 : 0, - display: 'inline-flex', alignItems: 'center', gap: 3, - fontSize: 9, fontWeight: isActive ? 600 : 500, + display: 'inline-flex', alignItems: 'center', gap: 4, + fontSize: 10, fontWeight: isActive ? 600 : 500, cursor: 'pointer', flexShrink: 0, }} > - + {v.label} ) @@ -409,8 +409,8 @@ export default function OberleisteApp() { color: isPerspective ? 'var(--text-muted)' : 'var(--bg-panel)', border: '1px solid var(--border-light)', borderRadius: 999, - fontFamily: 'DM Mono, monospace', fontSize: 10, fontWeight: 600, - minWidth: 56, justifyContent: 'center', flexShrink: 0, + fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600, + minWidth: 60, justifyContent: 'center', flexShrink: 0, }} title="Live-Zoom"> {isPerspective ? '—' : fmtScale(scaleVal)} @@ -427,12 +427,12 @@ export default function OberleisteApp() { }} onBlur={applyDraft} style={{ - height: BAR_H, width: 90, + height: BAR_H, width: 100, background: 'var(--bg-item)', color: 'var(--text-primary)', border: '1px solid var(--border)', borderRadius: 999, - padding: '0 10px', fontSize: 10, + padding: '0 12px', fontSize: 11, fontFamily: 'DM Mono, monospace', outline: 'none', }}