From 01824979635350b3a875fa84629d5a3c2f49fb80 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Wed, 20 May 2026 23:10:55 +0200
Subject: [PATCH] Massstab Row 1: 4 Buttons in segmented Pill statt
 Einzel-Knoepfen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User: Massstab-Block sah nicht huebsch aus, die 4 runden Buttons saßen
detached nebeneinander. Polish: alle 4 in einer durchgehenden Pill-Gruppe
(analog View-Toggle), bg-input fuer inaktive, accent fuer aktiven Print-
View-Toggle. Sieht jetzt visuell geschlossen aus.

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

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index bb0fe7f..99594d0 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -558,30 +558,53 @@ export default function OberleisteApp() {
       <div style={sep} />
 
       {/* ====== MASSSTAB 2-Reihen ======
-          Oben:  Buttons (%, fit, center, print/edit)
+          Oben:  Segmented-Pill mit 4 Tools (%, fit, center, print/edit)
           Unten: Live-Zoom-Chip + Dropdown
       */}
+      {(() => {
+        // Segmented button — sitzt nahtlos in einer Pill mit den anderen
+        const SegBtn = ({ icon, onClick, title, disabled, active, isFirst, isLast }) => (
+          <button onClick={onClick} disabled={disabled} title={title}
+            style={{
+              height: BAR_H, width: 30,
+              background: active ? 'var(--accent)' : 'var(--bg-input)',
+              border: 'none',
+              borderLeft: isFirst ? 'none' : '1px solid var(--border)',
+              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+              cursor: disabled ? 'not-allowed' : 'pointer',
+              opacity: disabled ? 0.4 : 1, flexShrink: 0,
+              padding: 0,
+            }}>
+            <Icon name={icon} size={13}
+                  style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />
+          </button>
+        )
+        return (
       <div style={{
         display: 'flex', flexDirection: 'column', gap: 4,
         flexShrink: 0,
       }}>
-        {/* Reihe 1: Buttons */}
-        <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-start' }}>
-          <BarButton icon="percent" onClick={apply100}
-                      disabled={isPerspective || !appliedScale}
-                      title={appliedScale ? `Zoom auf 1:${appliedScale} snappen` : 'Erst einen Massstab wählen'} />
-          <BarButton icon="fit_screen" onClick={zoomExtents}
-                      title="Auf gesamten Inhalt zoomen" />
-          <BarButton icon="center_focus_strong" onClick={zoomSelection}
-                      title="Auf Selektion zoomen" />
-          <BarButton
+        {/* Reihe 1: Segmented Pill mit 4 Tools */}
+        <div style={{
+          display: 'inline-flex', alignSelf: 'flex-start',
+          border: '1px solid var(--border)', borderRadius: 999,
+          overflow: 'hidden', flexShrink: 0,
+        }}>
+          <SegBtn icon="percent" onClick={apply100} isFirst
+                  disabled={isPerspective || !appliedScale}
+                  title={appliedScale ? `Zoom auf 1:${appliedScale} snappen` : 'Erst einen Massstab wählen'} />
+          <SegBtn icon="fit_screen" onClick={zoomExtents}
+                  title="Auf gesamten Inhalt zoomen" />
+          <SegBtn icon="center_focus_strong" onClick={zoomSelection}
+                  title="Auf Selektion zoomen" />
+          <SegBtn
             icon={state.showLineweights ? 'print' : 'edit'}
             active={state.showLineweights}
             onClick={() => setShowLineweights(!state.showLineweights)}
+            isLast
             title={state.showLineweights
               ? 'Print-View aktiv — klick zum Ausschalten'
-              : 'Strichstärken anzeigen (Print-View)'}
-          />
+              : 'Strichstärken anzeigen (Print-View)'} />
         </div>
         {/* Reihe 2: Live-Zoom + Dropdown */}
         <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
@@ -590,7 +613,7 @@ export default function OberleisteApp() {
             height: BAR_H, padding: '0 10px',
             background: isPerspective ? 'var(--bg-input)' : 'var(--accent)',
             color: isPerspective ? 'var(--text-muted)' : 'var(--bg-panel)',
-            border: '1px solid var(--border-light)',
+            border: '1px solid var(--border)',
             borderRadius: 999,
             fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
             minWidth: 60, justifyContent: 'center', flexShrink: 0,
@@ -642,6 +665,8 @@ export default function OberleisteApp() {
           )}
         </div>
       </div>
+        )
+      })()}
 
       {/* Snap-Toggles (Ortho/Grid/OSnap) sind in Rhinos eigener Footer-Bar
           schon vorhanden — hier rausgenommen um Doppelung zu vermeiden. */}