[Bug]: [UI/UX] Trophy illustration alignment issue on Profile page

[Adi-Marathe]

Bug Description

🖼️ Current UI/UX Behavior

On the Profile page, the trophy illustration inside the "Community Champion" achievement card is not properly centered within its container.

The image appears slightly shifted, which affects the visual balance and overall UI consistency of the achievement section.

📍 Affected Section

• Profile Page
• Community Champion achievement card

⚠️ Issue Details

• Trophy illustration is horizontally misaligned.
• Uneven spacing is visible around the image.
• The card layout looks visually unbalanced.

✨ Suggested Improvement

• Center-align the trophy illustration using proper flexbox/grid alignment.
• Ensure consistent spacing around the image.
• Maintain responsive alignment across all screen sizes.

✅ Expected Result

The trophy illustration should:

• Be perfectly centered inside the achievement card.
• Maintain equal spacing from both sides.
• Improve the visual consistency and professional appearance of the Profile page.

📸 Screenshot

[github-actions]

Thank you for opening this issue, @Adi-Marathe! 🚀

A maintainer (@indresh404) will review this and assign it to you if the issue is valid. Please wait for assignment before you start working on it!

Happy contributing! 🌟

[Adi-Marathe]

Hi @indresh404 👋
I would like to work on this UI alignment issue. I can fix the trophy illustration positioning and ensure proper centering and responsive alignment across different screen sizes.

Please assign this issue to me under GSSoC'26 & NSoC'26. Thank you!

[Xenon010101]

Hi! I'd like to work on this under GSSoC 2026. I'll fix the trophy illustration alignment on the Profile page. Could you please assign this to me?

[ishita526]

Hi @indresh404
I would like to work on this issue under GSSoC 2026.

I’ve reviewed the problem and I have a clear approach to fix the alignment issue of the trophy illustration in the “Community Champion” achievement card.

Proposed Approach:

• Inspect the current layout of the achievement card container
• Fix alignment using proper flexbox/grid centering (justify-content: center, align-items: center)
• Ensure the trophy image is centered both horizontally and vertically within its wrapper
• Adjust spacing/margins to maintain equal padding on all sides
• Verify responsiveness across different screen sizes to prevent layout shift
• Test UI consistency with other achievement cards to maintain uniform design

This will ensure the trophy illustration is perfectly centered and visually balanced across all devices.

Please assign this issue to me. Thank you!

[anshul23102]

Interested in contributing under NSoC'26. This is a valuable issue. Happy to work on it.

/assign