From 79c8392c2cf663cb0eca0e4672c4f233fd5cf51b Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Thu, 21 May 2026 00:23:04 +0200
Subject: [PATCH] Pill-Hoehen erzwingen: box-sizing border-box + min/max-height
 auf Buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User: View-Bars und Massstab-Buttons-Pill sind hoeher als die Dropdowns
trotz gleicher BAR_H. Browser-Defaults fuer <button> koennen trotz
padding:0 implizite Mindesthoehen einfuehren — besonders auf macOS WebKit.

Fix:
- Alle Outer-Pills (View Row1/Row2, Massstab Buttons-Pill, BarCombo)
  bekommen explizite height = BAR_H+2 + box-sizing: border-box. Damit
  visual genau BAR_H+2 = 24px egal welche default-render-Schicht
  drueberkommt.
- Inner Buttons (cellStyle + SegBtn): minHeight/maxHeight = BAR_H,
  appearance: none, line-height: 1, box-sizing border-box. Lockt die
  Hoehe absolut.
- Massstab SegBtn Icon-Size 13 → 11 (analog View-Icons)

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

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index e9404af..fa39583 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -139,7 +139,7 @@ function BarCombo({
         }}
         style={{
           display: 'inline-flex', alignItems: 'stretch',
-          height: BAR_H, width,
+          height: BAR_H + 2, width, boxSizing: 'border-box',
           background: 'var(--bg-input)',
           border: '1px solid var(--border)',
           borderRadius: 999,
@@ -410,7 +410,8 @@ export default function OberleisteApp() {
         const VIEW_W = 140  // konsistent mit Massstab-Pills
         const CELL_W = Math.floor(VIEW_W / 4)
         const cellStyle = (isActive, isFirst) => ({
-          height: BAR_H, width: CELL_W,
+          height: BAR_H, minHeight: BAR_H, maxHeight: BAR_H,
+          width: CELL_W,
           background: isActive ? 'var(--accent)' : 'var(--bg-input)',
           color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
           border: 'none',
@@ -418,6 +419,8 @@ export default function OberleisteApp() {
           display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
           gap: 4, fontWeight: isActive ? 600 : 500,
           cursor: 'pointer', flexShrink: 0, padding: 0,
+          appearance: 'none', WebkitAppearance: 'none',
+          lineHeight: 1, boxSizing: 'border-box',
           transition: 'background 0.15s, color 0.15s',
         })
         const hoverIn = (isActive) => (e) => {
@@ -442,6 +445,7 @@ export default function OberleisteApp() {
             {/* Reihe 1 */}
             <div style={{
               display: 'inline-flex', width: VIEW_W,
+              height: BAR_H + 2, boxSizing: 'border-box',
               border: '1px solid var(--border)', borderRadius: 999,
               overflow: 'hidden', flexShrink: 0,
             }}>
@@ -465,6 +469,7 @@ export default function OberleisteApp() {
             {/* Reihe 2: N/O/S/W als Buchstaben */}
             <div style={{
               display: 'inline-flex', width: VIEW_W,
+              height: BAR_H + 2, boxSizing: 'border-box',
               border: '1px solid var(--border)', borderRadius: 999,
               overflow: 'hidden', flexShrink: 0,
             }}>
@@ -628,7 +633,8 @@ export default function OberleisteApp() {
               e.currentTarget.style.color = 'var(--text-primary)'
             }}
             style={{
-              height: BAR_H, width: BTN_W,
+              height: BAR_H, minHeight: BAR_H, maxHeight: BAR_H,
+              width: BTN_W,
               background: active ? 'var(--accent)' : 'var(--bg-input)',
               color: active ? 'var(--bg-panel)' : 'var(--text-primary)',
               border: 'none',
@@ -637,9 +643,11 @@ export default function OberleisteApp() {
               cursor: disabled ? 'not-allowed' : 'pointer',
               opacity: disabled ? 0.4 : 1, flexShrink: 0,
               padding: 0,
+              appearance: 'none', WebkitAppearance: 'none',
+              lineHeight: 1, boxSizing: 'border-box',
               transition: 'background 0.15s, color 0.15s',
             }}>
-            <Icon name={icon} size={13} />
+            <Icon name={icon} size={11} />
           </button>
         )
         const ratio = (!isPerspective && appliedScale && scaleVal)
@@ -745,6 +753,7 @@ export default function OberleisteApp() {
         {/* Reihe 2, Spalte 2: Buttons-Pill — gleiche Breite wie Dropdown */}
         <div style={{
           display: 'inline-flex', width: PILL_W,
+          height: BAR_H + 2, boxSizing: 'border-box',
           border: '1px solid var(--border)', borderRadius: 999,
           overflow: 'hidden', flexShrink: 0, justifySelf: 'start',
         }}>