diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx index b10dba6..e3bd1e7 100644 --- a/src/OberleisteApp.jsx +++ b/src/OberleisteApp.jsx @@ -560,10 +560,9 @@ export default function OberleisteApp() {
- {/* ====== MASSSTAB 2-Reihen ====== - Links: Segmented-Pill mit 4 Tools (zentriert ueber beide Reihen) - Rechts oben: Massstab-Dropdown (gesetzt = green) - Rechts unten: Zoom-Verhaeltnis zum gesetzten Massstab (% Anzeige) + {/* ====== MASSSTAB 2x2 ====== + Reihe 1: [Aktueller Massstab] [Massstab-Dropdown (gruen wenn gesetzt)] + Reihe 2: [Zoom-Verhaeltnis %] [Buttons] */} {(() => { const SegBtn = ({ icon, onClick, title, disabled, active, isFirst, isLast }) => ( @@ -582,8 +581,6 @@ export default function OberleisteApp() { style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} /> ) - // Zoom-Verhaeltnis: setScale / liveScale → % - // 100% = perfekt am gesetzten Massstab; >100 = reingezoomt; <100 = rausgezoomt const ratio = (!isPerspective && appliedScale && scaleVal) ? appliedScale / scaleVal : null @@ -593,13 +590,85 @@ export default function OberleisteApp() { ? Math.round(ratio * 100) + '%' : (ratio * 100).toFixed(ratio < 0.1 ? 1 : 0) + '%' const atScale = ratio != null && Math.abs(ratio - 1) < 0.005 + const STAT_W = 80 // Breite der linken Stat-Chips (1:N / %) + const statChipStyle = (accentTint) => ({ + display: 'inline-flex', alignItems: 'center', justifyContent: 'center', + height: BAR_H, width: STAT_W, + background: accentTint ? 'var(--accent-dim)' : 'var(--bg-input)', + color: accentTint ? 'var(--accent-light)' : 'var(--text-muted)', + border: '1px solid var(--border)', + borderRadius: 999, + fontFamily: 'DM Mono, monospace', fontSize: 11, + fontWeight: accentTint ? 600 : 500, + flexShrink: 0, + }) return ( -