fix(button): centre icons via flex gap instead of margin#7402
fix(button): centre icons via flex gap instead of margin#7402talissoncosta wants to merge 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
Bot
added
the
front-end
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
Docker builds report
|
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
|
Visual Regression16 screenshots compared. See report for details. |
talissoncosta
requested review from
Zaimwa9 and
khvn26
and removed request for
a team
|
@talissoncosta can you rebase main please |
The `<button>` path applied `mr-2` to iconLeft and `ml-2` to iconRight directly on the icon element. For icon-only buttons (`theme='icon'`) this margin pushed the icon off-centre against the 32×32 button container — the icon sat ~4px to the left of true centre because margin-right shifts the flex item before `justify-content: center` re-centres it. Wraps the button content in a flex span with `gap-2`, matching the existing `<a>` path. Gap only inserts space between siblings (not leading/trailing), so icon-only buttons now centre cleanly while icon+label combinations keep the same visual spacing. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
talissoncosta
force-pushed
the
fix/button-icon-spacing
branch
from
d14de72 to
22626b0
Compare
|
@Zaimwa9 done, sorry for that. |
2 participants
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Follow-up to a review comment on #7100 (thread) — icon-only buttons (
theme='icon') sat with the icon visibly off-centre.Cause: the
<button>path appliedmr-2directly to iconLeft andml-2to iconRight. For icon-only buttons (32×32,display: flex; justify-content: center), the trailing margin pushed the icon ~4px to the left of true centre —justify-content: centerre-centres the flex item, but the margin still shifts everything inside it.Fix: wrap the button content in a flex span with
gap-2, matching the existing<a>path that already uses this pattern.gaponly inserts space between siblings (no leading/trailing space), so icon-only buttons centre cleanly while icon+label combinations keep their visual spacing unchanged.How did you test this code?
Components/Button→ confirmed:theme='icon'button: icon is centred in the 32×32 box (was offset left).