[Design] Fixing alignment for user cards and Github icon in Contributors.html

[Sahilbhatane]

On the Contributors page, the GitHub icon on the right side of each contributor card appears slightly misaligned vertically compared to the avatar and center content. This is especially noticeable when cards have varying content heights.

After checking contributors.html, the misalignment seems to come from a mix of:

• justify-content: space-between on .contributor-card
• dynamic DOM restructuring via MutationObserver
• center section using align-items: center, while the icon section relies on implicit height alignment

image:

Suggested fix (CSS-only, minimal change)
Force consistent vertical centering across all three sections and avoid layout drift caused by content height differences.

.contributor-card {
  align-items: center; /* ensure all sections align vertically */
}

.card-icon-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

Optional improvement (more robust)
If you want better alignment and simpler layout logic, switching the card to CSS Grid removes the need for extra JS-based layout fixes:

.contributor-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;
}

This keeps:

• avatar perfectly aligned left
• contributor info centered
• GitHub icon vertically aligned and stable

No functional changes, just cleaner layout and more predictable alignment.

Why this helps

• Fixes visible misalignment on cards
• Reduces reliance on MutationObserver for layout correctness
• More resilient to content length and future UI changes

[github-actions]

Thanks @Sahilbhatane! 👋
Your issue is important — maintainers will take a look soon.

Before contributing, please note:
🔹 Make sure you check #23 – Important Contributing Guidelines for OpenSource Compass
🔹 PRs should be raised only after the issue is assigned

[Sahilbhatane]

@sayeeg-11 This is my first time contributing to this Project as a part of SWoC26, is it ok if I work on this Issue?

[Sahilbhatane]

Also we can make the it as a table layout, 3 columns, 3 card. top 3 contributors card will have little more visibility than other card (can be done by distinctively modifying first row) (similar issue #864 suggest somewhat similar), But this is just a idea and will be for another issue.

[Eshita-Badhe]

@Sahilbhatane @sayeeg-11
This is already solved by PR #879....

[Sahilbhatane]

@Eshita-Badhe thanks for letting me know 👍🏻