karim/DOSSIER
Public Access
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pill-Hoehen erzwingen: box-sizing border-box + min/max-height auf Buttons

Browse Source 
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>
This commit is contained in:
karim
2026-05-21 00:23:04 +02:00
parent c16f5ea740
commit 79c8392c2c
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/OberleisteApp.jsx
+13 -4
View File
@@ -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',
}}>