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