fix(button): move icon vertical-align from inline style to a class default

[cossssmin]

Problem

The icon <img> in <Button> hardcodes an inline style alongside :class:

<img … style="vertical-align: baseline; max-width: 100%;" :class="iconClass">

Since Tailwind utilities are imported !important in email (@import "tailwindcss/utilities" important), a passed iconClass like align-text-top already wins over the inline vertical-align: baseline in a normal inlined build. So the hardcoded inline style is effectively dead — the real cascade resolves to the class.

The trouble shows up in a class-first workflow that de-inlines residual style="" back into utility classes: that dead inline vertical-align: baseline gets converted into an align-baseline utility and stacked next to the authored align-text-top. Two conflicting !important vertical-align utilities land on one element, and the wrong one can win.

Fix

Move the icon defaults from an inline style to a twMerge'd class, so iconClass overrides them cleanly and no inline vertical-align is emitted:

-<img … style="vertical-align: baseline; max-width: 100%;" :class="iconClass">
+<img … :class="twMerge('max-w-full align-baseline', iconClass)">

twMerge already collapses vertical-align conflicts, so:

• default (iconClass='') → max-w-full align-baseline (unchanged behavior)
• iconClass="align-text-top" → max-w-full align-text-top

Output is identical for the default and for inlined builds; the class-first path now yields a single, correct vertical-align. Applied to both icon positions (left/right).

Summary by CodeRabbit

• Style
  • Improved button icon sizing and baseline alignment.
  • Applied the styling consistently to icons positioned on either side of a button while preserving custom icon styles.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 84ea4b6a-0b7e-4e68-896a-7e5a4dbdc999

📥 Commits

Reviewing files that changed from the base of the PR and between c22bd45 and 09f4f92.

📒 Files selected for processing (1)

• src/components/Button.vue

---

📝 Walkthrough

Walkthrough

The Button component replaces inline icon sizing and alignment styles with merged Tailwind classes for left- and right-positioned icons. Custom iconClass values remain supported.

Changes

Button icon styling

Layer / File(s)	Summary
Merge icon sizing and alignment classes src/components/Button.vue	Icons use max-w-full align-baseline through merged classes on both sides of the button label. Custom iconClass values remain supported.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Mergeability Score: ⚪ Minimal · up to 09f4f

This localized change moves button icon defaults into mergeable utility classes, preserving existing default rendering while making alignment overrides reliable; no actionable merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: moving button icon vertical alignment from an inline style to a default class.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/button-icon-vertical-align

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}