KIconButton and KButton vertical misalignment when placed side-by-side

[rtibbles]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Target branch: develop

Observed behavior

When KIconButton and KButton are placed side-by-side (e.g., in a KButtonGroup or flex container), the icons in KIconButton are subtly vertically misaligned with the icon and text in KButton.

Errors and logs

N/A

Expected behavior

KIconButton and KButton should vertically centre-align when placed side-by-side in a shared container (e.g., KButtonGroup or flex layout).

User-facing consequences

Minor visual polish issue. Toolbar controls are fully functional but look slightly misaligned, which can feel unpolished.

Steps to reproduce

1. Place a KIconButton and a KButton (with icon and text) side-by-side in a KButtonGroup or flex container with align-items: center
2. Observe that the icon centres in KIconButton do not vertically align with the icon/text in KButton

Context

• kolibri-design-system 5.5.1
• Observed in Chromium

AI usage

Issue drafted using Claude Code during a collaborative design iteration session on Kolibri content viewer toolbars. The misalignment was observed by the developer; screenshot captured and uploaded by Claude Code. All content reviewed before posting.