fix(ui): switch thumb geometry + settings switch unification + permission button affordance (round 8) by jackwener · Pull Request #659 · apache/maka

jackwener · 2026-07-09T09:59:04Z

Maintainer-reported defects, root-caused with CDP computed-style measurement (not eyeballing):

1. The switch bug — thumb stops 4.4px short of the edge

Switch checked travel was translate-x-[1.125rem] — a rem arbitrary value. The app runs a 13px root font, so it computed to 14.625px instead of 18px. Tailwind v4's spacing utilities (w-9, h-5, translate-x-0.5) are px-calc'd via --spacing and don't scale with root font — the one rem value in the recipe was the one that broke. Measured before: checked inset left 15.6 / right 4.4 (vs unchecked 3/17). Fix: translate-x-4 (16px on the spacing scale) → measured after: 17/3, perfectly mirroring 3/17.

2. Two switch sizes inside settings

The 46×26 settings scale was scoped to .settingsFormRow/.settingsField only — 数据配置导入导出's category list (and any ad-hoc row) silently fell back to the compact 36×20. One scope now: .settingsModal [role=switch]. Also fixed the scoped checked travel 22px→20px — the old value parked the thumb flush against the right border (0 inset) while unchecked kept 2px. Measured after: 3/21 ↔ 21/3 symmetric.

3. 前往系统设置 was a ghost button with no edge

Sitting directly beside the primary 请求授权, it read as a text label. Now a bordered secondary; the PR-PERMISSIONS-UNIFIED-CARD contract is re-pinned to the new form and additionally bans ghost in that actions row.

Verification

CDP geometry probes before/after on settings-data (46×26 scale) and module-skills (base scale) fixtures — all symmetric
Screenshots of 权限与能力 + 数据 confirm the bordered button and correctly-filling switches
Desktop suite 2281/2281, check-dead-css clean

…sion button affordance (round 8) Three maintainer-reported defects, all CDP-measured before/after: 1. Switch thumb couldn't reach the track edge. The checked travel used a rem arbitrary value (translate-x-[1.125rem]) which silently shrank to 14.625px under the app's 13px root font — Tailwind v4 spacing utilities are px-calc'd but rem arbitrary values are not — leaving a 4.4px right gap vs the 2px left inset. Now translate-x-4 (16px, spacing scale): symmetric 2px insets. Measured 3/17 ↔ 17/3. 2. Two switch sizes coexisted inside settings: rows built from settingsFormRow/settingsField got the scoped 46×26 scale while 数据导入导出's category list fell back to the compact 36×20. The scale now scopes to .settingsModal [role=switch] — one switch size across ALL settings surfaces — and the checked translate is 20px (46 − 2×1 border − 22 thumb − 2 inset), fixing the old 22px flush-right asymmetry. Measured 3/21 ↔ 21/3. 3. 权限与能力前往系统设置 rendered variant=ghost next to the primary 请求授权 — no edge, unrecognizable as a button. Now bordered secondary; contract re-pinned to ban ghost in that actions row. Desktop suite 2281/2281; module-page switches (base scale) re-measured symmetric as well.

jackwener · 2026-07-09T09:59:04Z

Maintainer-reported defects, root-caused with CDP computed-style measurement (not eyeballing):

1. The switch bug — thumb stops 4.4px short of the edge

Switch checked travel was translate-x-[1.125rem] — a rem arbitrary value. The app runs a 13px root font, so it computed to 14.625px instead of 18px. Tailwind v4's spacing utilities (w-9, h-5, translate-x-0.5) are px-calc'd via --spacing and don't scale with root font — the one rem value in the recipe was the one that broke. Measured before: checked inset left 15.6 / right 4.4 (vs unchecked 3/17). Fix: translate-x-4 (16px on the spacing scale) → measured after: 17/3, perfectly mirroring 3/17.

2. Two switch sizes inside settings

The 46×26 settings scale was scoped to .settingsFormRow/.settingsField only — 数据配置导入导出's category list (and any ad-hoc row) silently fell back to the compact 36×20. One scope now: .settingsModal [role=switch]. Also fixed the scoped checked travel 22px→20px — the old value parked the thumb flush against the right border (0 inset) while unchecked kept 2px. Measured after: 3/21 ↔ 21/3 symmetric.

3. 前往系统设置 was a ghost button with no edge

Sitting directly beside the primary 请求授权, it read as a text label. Now a bordered secondary; the PR-PERMISSIONS-UNIFIED-CARD contract is re-pinned to the new form and additionally bans ghost in that actions row.

Verification

CDP geometry probes before/after on settings-data (46×26 scale) and module-skills (base scale) fixtures — all symmetric
Screenshots of 权限与能力 + 数据 confirm the bordered button and correctly-filling switches
Desktop suite 2281/2281, check-dead-css clean

…sion button affordance (round 8) Three maintainer-reported defects, all CDP-measured before/after: 1. Switch thumb couldn't reach the track edge. The checked travel used a rem arbitrary value (translate-x-[1.125rem]) which silently shrank to 14.625px under the app's 13px root font — Tailwind v4 spacing utilities are px-calc'd but rem arbitrary values are not — leaving a 4.4px right gap vs the 2px left inset. Now translate-x-4 (16px, spacing scale): symmetric 2px insets. Measured 3/17 ↔ 17/3. 2. Two switch sizes coexisted inside settings: rows built from settingsFormRow/settingsField got the scoped 46×26 scale while 数据导入导出's category list fell back to the compact 36×20. The scale now scopes to .settingsModal [role=switch] — one switch size across ALL settings surfaces — and the checked translate is 20px (46 − 2×1 border − 22 thumb − 2 inset), fixing the old 22px flush-right asymmetry. Measured 3/21 ↔ 21/3. 3. 权限与能力前往系统设置 rendered variant=ghost next to the primary 请求授权 — no edge, unrecognizable as a button. Now bordered secondary; contract re-pinned to ban ghost in that actions row. Desktop suite 2281/2281; module-page switches (base scale) re-measured symmetric as well.

jackwener · 2026-07-09T09:59:04Z

Maintainer-reported defects, root-caused with CDP computed-style measurement (not eyeballing):

1. The switch bug — thumb stops 4.4px short of the edge

Switch checked travel was translate-x-[1.125rem] — a rem arbitrary value. The app runs a 13px root font, so it computed to 14.625px instead of 18px. Tailwind v4's spacing utilities (w-9, h-5, translate-x-0.5) are px-calc'd via --spacing and don't scale with root font — the one rem value in the recipe was the one that broke. Measured before: checked inset left 15.6 / right 4.4 (vs unchecked 3/17). Fix: translate-x-4 (16px on the spacing scale) → measured after: 17/3, perfectly mirroring 3/17.

2. Two switch sizes inside settings

The 46×26 settings scale was scoped to .settingsFormRow/.settingsField only — 数据配置导入导出's category list (and any ad-hoc row) silently fell back to the compact 36×20. One scope now: .settingsModal [role=switch]. Also fixed the scoped checked travel 22px→20px — the old value parked the thumb flush against the right border (0 inset) while unchecked kept 2px. Measured after: 3/21 ↔ 21/3 symmetric.

3. 前往系统设置 was a ghost button with no edge

Sitting directly beside the primary 请求授权, it read as a text label. Now a bordered secondary; the PR-PERMISSIONS-UNIFIED-CARD contract is re-pinned to the new form and additionally bans ghost in that actions row.

Verification

CDP geometry probes before/after on settings-data (46×26 scale) and module-skills (base scale) fixtures — all symmetric
Screenshots of 权限与能力 + 数据 confirm the bordered button and correctly-filling switches
Desktop suite 2281/2281, check-dead-css clean

…sion button affordance (round 8) Three maintainer-reported defects, all CDP-measured before/after: 1. Switch thumb couldn't reach the track edge. The checked travel used a rem arbitrary value (translate-x-[1.125rem]) which silently shrank to 14.625px under the app's 13px root font — Tailwind v4 spacing utilities are px-calc'd but rem arbitrary values are not — leaving a 4.4px right gap vs the 2px left inset. Now translate-x-4 (16px, spacing scale): symmetric 2px insets. Measured 3/17 ↔ 17/3. 2. Two switch sizes coexisted inside settings: rows built from settingsFormRow/settingsField got the scoped 46×26 scale while 数据导入导出's category list fell back to the compact 36×20. The scale now scopes to .settingsModal [role=switch] — one switch size across ALL settings surfaces — and the checked translate is 20px (46 − 2×1 border − 22 thumb − 2 inset), fixing the old 22px flush-right asymmetry. Measured 3/21 ↔ 21/3. 3. 权限与能力前往系统设置 rendered variant=ghost next to the primary 请求授权 — no edge, unrecognizable as a button. Now bordered secondary; contract re-pinned to ban ghost in that actions row. Desktop suite 2281/2281; module-page switches (base scale) re-measured symmetric as well.

jackwener · 2026-07-09T09:59:04Z

Maintainer-reported defects, root-caused with CDP computed-style measurement (not eyeballing):

1. The switch bug — thumb stops 4.4px short of the edge

Switch checked travel was translate-x-[1.125rem] — a rem arbitrary value. The app runs a 13px root font, so it computed to 14.625px instead of 18px. Tailwind v4's spacing utilities (w-9, h-5, translate-x-0.5) are px-calc'd via --spacing and don't scale with root font — the one rem value in the recipe was the one that broke. Measured before: checked inset left 15.6 / right 4.4 (vs unchecked 3/17). Fix: translate-x-4 (16px on the spacing scale) → measured after: 17/3, perfectly mirroring 3/17.

2. Two switch sizes inside settings

The 46×26 settings scale was scoped to .settingsFormRow/.settingsField only — 数据配置导入导出's category list (and any ad-hoc row) silently fell back to the compact 36×20. One scope now: .settingsModal [role=switch]. Also fixed the scoped checked travel 22px→20px — the old value parked the thumb flush against the right border (0 inset) while unchecked kept 2px. Measured after: 3/21 ↔ 21/3 symmetric.

3. 前往系统设置 was a ghost button with no edge

Sitting directly beside the primary 请求授权, it read as a text label. Now a bordered secondary; the PR-PERMISSIONS-UNIFIED-CARD contract is re-pinned to the new form and additionally bans ghost in that actions row.

Verification

CDP geometry probes before/after on settings-data (46×26 scale) and module-skills (base scale) fixtures — all symmetric
Screenshots of 权限与能力 + 数据 confirm the bordered button and correctly-filling switches
Desktop suite 2281/2281, check-dead-css clean

…sion button affordance (round 8) Three maintainer-reported defects, all CDP-measured before/after: 1. Switch thumb couldn't reach the track edge. The checked travel used a rem arbitrary value (translate-x-[1.125rem]) which silently shrank to 14.625px under the app's 13px root font — Tailwind v4 spacing utilities are px-calc'd but rem arbitrary values are not — leaving a 4.4px right gap vs the 2px left inset. Now translate-x-4 (16px, spacing scale): symmetric 2px insets. Measured 3/17 ↔ 17/3. 2. Two switch sizes coexisted inside settings: rows built from settingsFormRow/settingsField got the scoped 46×26 scale while 数据导入导出's category list fell back to the compact 36×20. The scale now scopes to .settingsModal [role=switch] — one switch size across ALL settings surfaces — and the checked translate is 20px (46 − 2×1 border − 22 thumb − 2 inset), fixing the old 22px flush-right asymmetry. Measured 3/21 ↔ 21/3. 3. 权限与能力前往系统设置 rendered variant=ghost next to the primary 请求授权 — no edge, unrecognizable as a button. Now bordered secondary; contract re-pinned to ban ghost in that actions row. Desktop suite 2281/2281; module-page switches (base scale) re-measured symmetric as well.

jackwener · 2026-07-09T09:59:04Z

Maintainer-reported defects, root-caused with CDP computed-style measurement (not eyeballing):

1. The switch bug — thumb stops 4.4px short of the edge

Switch checked travel was translate-x-[1.125rem] — a rem arbitrary value. The app runs a 13px root font, so it computed to 14.625px instead of 18px. Tailwind v4's spacing utilities (w-9, h-5, translate-x-0.5) are px-calc'd via --spacing and don't scale with root font — the one rem value in the recipe was the one that broke. Measured before: checked inset left 15.6 / right 4.4 (vs unchecked 3/17). Fix: translate-x-4 (16px on the spacing scale) → measured after: 17/3, perfectly mirroring 3/17.

2. Two switch sizes inside settings

The 46×26 settings scale was scoped to .settingsFormRow/.settingsField only — 数据配置导入导出's category list (and any ad-hoc row) silently fell back to the compact 36×20. One scope now: .settingsModal [role=switch]. Also fixed the scoped checked travel 22px→20px — the old value parked the thumb flush against the right border (0 inset) while unchecked kept 2px. Measured after: 3/21 ↔ 21/3 symmetric.

3. 前往系统设置 was a ghost button with no edge

Sitting directly beside the primary 请求授权, it read as a text label. Now a bordered secondary; the PR-PERMISSIONS-UNIFIED-CARD contract is re-pinned to the new form and additionally bans ghost in that actions row.

Verification

CDP geometry probes before/after on settings-data (46×26 scale) and module-skills (base scale) fixtures — all symmetric
Screenshots of 权限与能力 + 数据 confirm the bordered button and correctly-filling switches
Desktop suite 2281/2281, check-dead-css clean

…sion button affordance (round 8) Three maintainer-reported defects, all CDP-measured before/after: 1. Switch thumb couldn't reach the track edge. The checked travel used a rem arbitrary value (translate-x-[1.125rem]) which silently shrank to 14.625px under the app's 13px root font — Tailwind v4 spacing utilities are px-calc'd but rem arbitrary values are not — leaving a 4.4px right gap vs the 2px left inset. Now translate-x-4 (16px, spacing scale): symmetric 2px insets. Measured 3/17 ↔ 17/3. 2. Two switch sizes coexisted inside settings: rows built from settingsFormRow/settingsField got the scoped 46×26 scale while 数据导入导出's category list fell back to the compact 36×20. The scale now scopes to .settingsModal [role=switch] — one switch size across ALL settings surfaces — and the checked translate is 20px (46 − 2×1 border − 22 thumb − 2 inset), fixing the old 22px flush-right asymmetry. Measured 3/21 ↔ 21/3. 3. 权限与能力前往系统设置 rendered variant=ghost next to the primary 请求授权 — no edge, unrecognizable as a button. Now bordered secondary; contract re-pinned to ban ghost in that actions row. Desktop suite 2281/2281; module-page switches (base scale) re-measured symmetric as well.

jackwener · 2026-07-09T09:59:04Z

Maintainer-reported defects, root-caused with CDP computed-style measurement (not eyeballing):

1. The switch bug — thumb stops 4.4px short of the edge

Switch checked travel was translate-x-[1.125rem] — a rem arbitrary value. The app runs a 13px root font, so it computed to 14.625px instead of 18px. Tailwind v4's spacing utilities (w-9, h-5, translate-x-0.5) are px-calc'd via --spacing and don't scale with root font — the one rem value in the recipe was the one that broke. Measured before: checked inset left 15.6 / right 4.4 (vs unchecked 3/17). Fix: translate-x-4 (16px on the spacing scale) → measured after: 17/3, perfectly mirroring 3/17.

2. Two switch sizes inside settings

The 46×26 settings scale was scoped to .settingsFormRow/.settingsField only — 数据配置导入导出's category list (and any ad-hoc row) silently fell back to the compact 36×20. One scope now: .settingsModal [role=switch]. Also fixed the scoped checked travel 22px→20px — the old value parked the thumb flush against the right border (0 inset) while unchecked kept 2px. Measured after: 3/21 ↔ 21/3 symmetric.

3. 前往系统设置 was a ghost button with no edge

Sitting directly beside the primary 请求授权, it read as a text label. Now a bordered secondary; the PR-PERMISSIONS-UNIFIED-CARD contract is re-pinned to the new form and additionally bans ghost in that actions row.

Verification

CDP geometry probes before/after on settings-data (46×26 scale) and module-skills (base scale) fixtures — all symmetric
Screenshots of 权限与能力 + 数据 confirm the bordered button and correctly-filling switches
Desktop suite 2281/2281, check-dead-css clean

…sion button affordance (round 8) Three maintainer-reported defects, all CDP-measured before/after: 1. Switch thumb couldn't reach the track edge. The checked travel used a rem arbitrary value (translate-x-[1.125rem]) which silently shrank to 14.625px under the app's 13px root font — Tailwind v4 spacing utilities are px-calc'd but rem arbitrary values are not — leaving a 4.4px right gap vs the 2px left inset. Now translate-x-4 (16px, spacing scale): symmetric 2px insets. Measured 3/17 ↔ 17/3. 2. Two switch sizes coexisted inside settings: rows built from settingsFormRow/settingsField got the scoped 46×26 scale while 数据导入导出's category list fell back to the compact 36×20. The scale now scopes to .settingsModal [role=switch] — one switch size across ALL settings surfaces — and the checked translate is 20px (46 − 2×1 border − 22 thumb − 2 inset), fixing the old 22px flush-right asymmetry. Measured 3/21 ↔ 21/3. 3. 权限与能力前往系统设置 rendered variant=ghost next to the primary 请求授权 — no edge, unrecognizable as a button. Now bordered secondary; contract re-pinned to ban ghost in that actions row. Desktop suite 2281/2281; module-page switches (base scale) re-measured symmetric as well.

jackwener · 2026-07-09T09:59:04Z

Maintainer-reported defects, root-caused with CDP computed-style measurement (not eyeballing):

1. The switch bug — thumb stops 4.4px short of the edge

Switch checked travel was translate-x-[1.125rem] — a rem arbitrary value. The app runs a 13px root font, so it computed to 14.625px instead of 18px. Tailwind v4's spacing utilities (w-9, h-5, translate-x-0.5) are px-calc'd via --spacing and don't scale with root font — the one rem value in the recipe was the one that broke. Measured before: checked inset left 15.6 / right 4.4 (vs unchecked 3/17). Fix: translate-x-4 (16px on the spacing scale) → measured after: 17/3, perfectly mirroring 3/17.

2. Two switch sizes inside settings

The 46×26 settings scale was scoped to .settingsFormRow/.settingsField only — 数据配置导入导出's category list (and any ad-hoc row) silently fell back to the compact 36×20. One scope now: .settingsModal [role=switch]. Also fixed the scoped checked travel 22px→20px — the old value parked the thumb flush against the right border (0 inset) while unchecked kept 2px. Measured after: 3/21 ↔ 21/3 symmetric.

3. 前往系统设置 was a ghost button with no edge

Sitting directly beside the primary 请求授权, it read as a text label. Now a bordered secondary; the PR-PERMISSIONS-UNIFIED-CARD contract is re-pinned to the new form and additionally bans ghost in that actions row.

Verification

CDP geometry probes before/after on settings-data (46×26 scale) and module-skills (base scale) fixtures — all symmetric
Screenshots of 权限与能力 + 数据 confirm the bordered button and correctly-filling switches
Desktop suite 2281/2281, check-dead-css clean

…sion button affordance (round 8) Three maintainer-reported defects, all CDP-measured before/after: 1. Switch thumb couldn't reach the track edge. The checked travel used a rem arbitrary value (translate-x-[1.125rem]) which silently shrank to 14.625px under the app's 13px root font — Tailwind v4 spacing utilities are px-calc'd but rem arbitrary values are not — leaving a 4.4px right gap vs the 2px left inset. Now translate-x-4 (16px, spacing scale): symmetric 2px insets. Measured 3/17 ↔ 17/3. 2. Two switch sizes coexisted inside settings: rows built from settingsFormRow/settingsField got the scoped 46×26 scale while 数据导入导出's category list fell back to the compact 36×20. The scale now scopes to .settingsModal [role=switch] — one switch size across ALL settings surfaces — and the checked translate is 20px (46 − 2×1 border − 22 thumb − 2 inset), fixing the old 22px flush-right asymmetry. Measured 3/21 ↔ 21/3. 3. 权限与能力前往系统设置 rendered variant=ghost next to the primary 请求授权 — no edge, unrecognizable as a button. Now bordered secondary; contract re-pinned to ban ghost in that actions row. Desktop suite 2281/2281; module-page switches (base scale) re-measured symmetric as well.

jackwener · 2026-07-09T09:59:04Z

Maintainer-reported defects, root-caused with CDP computed-style measurement (not eyeballing):

1. The switch bug — thumb stops 4.4px short of the edge

Switch checked travel was translate-x-[1.125rem] — a rem arbitrary value. The app runs a 13px root font, so it computed to 14.625px instead of 18px. Tailwind v4's spacing utilities (w-9, h-5, translate-x-0.5) are px-calc'd via --spacing and don't scale with root font — the one rem value in the recipe was the one that broke. Measured before: checked inset left 15.6 / right 4.4 (vs unchecked 3/17). Fix: translate-x-4 (16px on the spacing scale) → measured after: 17/3, perfectly mirroring 3/17.

2. Two switch sizes inside settings

The 46×26 settings scale was scoped to .settingsFormRow/.settingsField only — 数据配置导入导出's category list (and any ad-hoc row) silently fell back to the compact 36×20. One scope now: .settingsModal [role=switch]. Also fixed the scoped checked travel 22px→20px — the old value parked the thumb flush against the right border (0 inset) while unchecked kept 2px. Measured after: 3/21 ↔ 21/3 symmetric.

3. 前往系统设置 was a ghost button with no edge

Sitting directly beside the primary 请求授权, it read as a text label. Now a bordered secondary; the PR-PERMISSIONS-UNIFIED-CARD contract is re-pinned to the new form and additionally bans ghost in that actions row.

Verification

CDP geometry probes before/after on settings-data (46×26 scale) and module-skills (base scale) fixtures — all symmetric
Screenshots of 权限与能力 + 数据 confirm the bordered button and correctly-filling switches
Desktop suite 2281/2281, check-dead-css clean

…sion button affordance (round 8) Three maintainer-reported defects, all CDP-measured before/after: 1. Switch thumb couldn't reach the track edge. The checked travel used a rem arbitrary value (translate-x-[1.125rem]) which silently shrank to 14.625px under the app's 13px root font — Tailwind v4 spacing utilities are px-calc'd but rem arbitrary values are not — leaving a 4.4px right gap vs the 2px left inset. Now translate-x-4 (16px, spacing scale): symmetric 2px insets. Measured 3/17 ↔ 17/3. 2. Two switch sizes coexisted inside settings: rows built from settingsFormRow/settingsField got the scoped 46×26 scale while 数据导入导出's category list fell back to the compact 36×20. The scale now scopes to .settingsModal [role=switch] — one switch size across ALL settings surfaces — and the checked translate is 20px (46 − 2×1 border − 22 thumb − 2 inset), fixing the old 22px flush-right asymmetry. Measured 3/21 ↔ 21/3. 3. 权限与能力前往系统设置 rendered variant=ghost next to the primary 请求授权 — no edge, unrecognizable as a button. Now bordered secondary; contract re-pinned to ban ghost in that actions row. Desktop suite 2281/2281; module-page switches (base scale) re-measured symmetric as well.

jackwener merged commit b291a76 into mainJul 9, 2026
3 checks passed

jackwener deleted the fix/switch-geometry-round8 branch July 9, 2026 09:59