Fix the text in buttons not being centered properly#4620
Conversation
| /* These flex and sizing properties aren't necessary when a real <button> is used, | ||
| * but they are when a <a> element is used as a button. */ | ||
| display: inline-flex; | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
buttons are border-box by default, while links are content-box. So this makes them even.
| display: flex; | ||
| /* These flex and sizing properties aren't necessary when a real <button> is used, | ||
| * but they are when a <a> element is used as a button. */ | ||
| display: inline-flex; |
There was a problem hiding this comment.
display: flex was wrong, as this moved it from a inline element to a block element.
| display: inline-flex; | ||
| box-sizing: border-box; | ||
| align-items: center; | ||
| justify-content: center; |
There was a problem hiding this comment.
The button have text-align: center but that doesn't work anymore once we move it to flex. With justify-content: center this should do the same thing in a flex context.
Codecov ReportPatch coverage has no change and project coverage change:
Additional details and impacted files@@ Coverage Diff @@
## main #4620 +/- ##
==========================================
+ Coverage 88.61% 88.63% +0.01%
==========================================
Files 294 294
Lines 26104 26086 -18
Branches 7039 7030 -9
==========================================
- Hits 23132 23121 -11
+ Misses 2766 2759 -7
Partials 206 206 ☔ View full report in Codecov by Sentry. |
2 participants
This is a regression from #4526.
Deploy preview
production