From 817455bbba3ae449b5c2b8e2c713f7b6d25a84dc Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Wed, 20 May 2026 23:46:00 +0200
Subject: [PATCH] Massstab Stat-Box: Live + Zoom-% als EINE gerundete Pill
 statt zwei

User: aus den zwei uebereinander stehenden Chips (1:405 / 4.9%) eine
einzelne gerundete Pill machen. Text-Hoehen bleiben wie vorher, dazwischen
ein duenner Trennstrich.

Aufbau:
- Outer: grid-row spans both Reihen, width STAT_W, height BAR_H*2+4
- Innen: top BAR_H mit live-Text, 4px Gap mit zentriertem 1px-Trennstrich
  (left/right 6px Inset), bottom BAR_H mit Ratio-Text
- Rundung: borderRadius 14 (gerundete Ecken)
- atScale: accent-dim bg + accent-light text fuer beide Texte

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/OberleisteApp.jsx | 63 +++++++++++++++++++++++++++----------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 7d16a24..464d5e0 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -643,27 +643,51 @@ 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 = 70   // Breite der linken Stat-Chips
-        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-primary)',
-          border: '1px solid var(--border)',
-          borderRadius: 999,
-          fontFamily: 'DM Mono, monospace', fontSize: 11,
-          fontWeight: accentTint ? 600 : 500,
-          flexShrink: 0,
-        })
+        const STAT_W = 70   // Breite der gemeinsamen Stat-Box
+        // Gesamte 2-Reihen-Hoehe: 2 × BAR_H + gap (4px) = ~48px
         return (
       <div style={{
         display: 'grid', gridTemplateColumns: 'auto auto', gap: '4px 6px',
         alignItems: 'center', flexShrink: 0,
       }}>
-        {/* Reihe 1, Spalte 1: Aktueller Live-Massstab — weiss, accent bei 100% */}
-        <div style={statChipStyle(atScale)}
-             title={isPerspective ? 'Perspektive — kein Massstab' : 'Aktueller Live-Massstab'}>
-          {isPerspective ? '—' : fmtScale(scaleVal)}
+        {/* Spalte 1, beide Reihen: EINE Pill mit Live-Massstab oben und
+            Zoom-% unten. Text-Hoehen bleiben identisch zu den
+            urspruenglichen 2 Chips — der Trennstrich sitzt in der Mitte
+            des 4px-Gaps zwischen ihnen. */}
+        <div style={{
+          gridRow: '1 / span 2',
+          display: 'flex', flexDirection: 'column',
+          width: STAT_W, height: BAR_H * 2 + 4,
+          background: atScale ? 'var(--accent-dim)' : 'var(--bg-input)',
+          color: atScale ? 'var(--accent-light)' : 'var(--text-primary)',
+          border: '1px solid var(--border)',
+          borderRadius: 14,
+          overflow: 'hidden',
+          fontFamily: 'DM Mono, monospace', fontSize: 11,
+          fontWeight: atScale ? 600 : 500,
+          flexShrink: 0,
+        }}>
+          <div style={{
+            height: BAR_H,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }} title={isPerspective ? 'Perspektive — kein Massstab' : 'Aktueller Live-Massstab'}>
+            {isPerspective ? '—' : fmtScale(scaleVal)}
+          </div>
+          <div style={{ height: 4, position: 'relative' }}>
+            <div style={{
+              position: 'absolute', left: 6, right: 6,
+              top: '50%', height: 1,
+              background: 'var(--border)',
+            }} />
+          </div>
+          <div style={{
+            height: BAR_H,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }} title={ratio != null
+            ? `Aktueller Zoom = ${ratioText} des gesetzten Massstabs`
+            : (isPerspective ? 'Perspektive' : 'Kein Massstab gesetzt')}>
+            {ratioText}
+          </div>
         </div>
         {/* Reihe 1, Spalte 2: Gesetzter Massstab Dropdown — KEIN Icon, gleiche
             Breite wie Buttons-Pill darunter, exakt uebereinander */}
@@ -709,13 +733,6 @@ export default function OberleisteApp() {
             <option value="__custom__">Eigener…</option>
           </BarCombo>
         )}
-        {/* Reihe 2, Spalte 1: Zoom-Verhaeltnis */}
-        <div style={statChipStyle(atScale)}
-             title={ratio != null
-               ? `Aktueller Zoom = ${ratioText} des gesetzten Massstabs`
-               : (isPerspective ? 'Perspektive' : 'Kein Massstab gesetzt')}>
-          {ratioText}
-        </div>
         {/* Reihe 2, Spalte 2: Buttons-Pill — gleiche Breite wie Dropdown */}
         <div style={{
           display: 'inline-flex', width: PILL_W,