Skip to content

docs(home): center version and GitHub buttons on homepage - #16327

Merged
vkarpov15 merged 1 commit into
masterfrom
docs/homepage-follow-alignment
Jun 10, 2026
Merged

docs(home): center version and GitHub buttons on homepage#16327
vkarpov15 merged 1 commit into
masterfrom
docs/homepage-follow-alignment

Conversation

@AbdelrahmanHafez

Copy link
Copy Markdown
Collaborator

The "Version X" text on the home page wasn't actually centered between the Star and Fork buttons, the row was positioned with magic offsets (margin-left: 109px, asymmetric margins, a top: -4px hack). The ghbtns iframes were also 100px wide while the Star button with the current star count needs 107px, so the count box was getting clipped.

This PR centers the row with flexbox instead, and widens the iframes to fit their rendered content (109px Star, 103px Fork) so the counts aren't clipped. Visual-only change.

Before image
After image

@AbdelrahmanHafez
AbdelrahmanHafez requested a review from Copilot June 10, 2026 13:10
@AbdelrahmanHafez AbdelrahmanHafez added the docs This issue is due to a mistake or omission in the mongoosejs.com documentation label Jun 10, 2026
@AbdelrahmanHafez
AbdelrahmanHafez marked this pull request as ready for review June 10, 2026 13:11

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adjusts the homepage “follow” row (GitHub Star/ Fork buttons + version text) to be properly centered and to prevent the GitHub button count UI from being clipped. It does so by switching the layout from offset-based positioning to flexbox centering, and by increasing the embedded GitHub button iframe widths.

Changes:

  • Increase GitHub button iframe widths to fit rendered count content.
  • Replace magic-offset positioning with a flexbox-centered #follow ul layout.
  • Simplify/remove bespoke version-span alignment hacks and rely on flex alignment + gap.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
index.pug Widens the GitHub button iframes (Star/ Fork) to avoid clipping.
docs/css/style.css Centers the follow row using flexbox and removes the prior offset-based alignment rules.

@vkarpov15 vkarpov15 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good 👍

Image

@vkarpov15
vkarpov15 merged commit 5118986 into master Jun 10, 2026
3 checks passed
@vkarpov15
vkarpov15 deleted the docs/homepage-follow-alignment branch June 10, 2026 14:23
@vkarpov15 vkarpov15 added this to the 9.7.1 milestone Jun 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs This issue is due to a mistake or omission in the mongoosejs.com documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants