docs(world-id): center the Beta badge on the Selfie Check card heading - #185
Merged
Merged
Conversation
Mintlify wraps a JSX heading's children in its own span, so the flex alignment on the h3 never reached the label and badge; the badge fell back to baseline alignment and hung below the text. Move the alignment onto an inner inline-flex span that wraps under the label at narrow widths, and drop the no-op method-pill class.
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
Takaros999
approved these changes
Sep 16, 2026
Takaros999
left a comment
Takaros999
left a comment
Contributor
There was a problem hiding this comment.
Approved: focused MDX markup fix for badge alignment; current checks are green.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
On the World ID overview page, the Beta badge next to "Selfie Check" in the credential cards sat visibly below the heading text. This centers it on the text.
Why it happened
Mintlify's heading component wraps a JSX heading's children in its own
<span class="cursor-pointer">, soflex items-center gap-2on the<h3>only aligned that wrapper. Inside it the badge was a plain inline span with baseline alignment, which made it hang low.Fix
inline-flex flex-wrap items-center gap-x-2 gap-y-1span around the label and badge.flex-wrapkeeps today's behavior in narrow grid columns: the badge wraps under the label instead of forcing the label onto two lines.selfie-check-beta) are unchanged.method-pillclass (Mintlify's internal API-method badge class; its only rule isprint-color-adjust).Verification
Prototyped the exact styles on the production DOM and measured with
getBoundingClientRect:The page compiles with the repo's MDX toolchain and cspell passes.