[Bug]: UI misalignment in 'Top Coder of the Week' section

[samrat21saha]

Description

There is a significant UI misalignment in the "Top Coder of the Week" section. The user's rank (#1), name, and points are not correctly positioned relative to the user's profile picture. They appear to be floating in space, far from the central circular image, which makes the layout look broken and unprofessional.

Steps to Reproduce

1. Navigate to the page containing the "Top Coder of the Week" section (e.g., the homepage).
2. Scroll down to view the component.
3. Observe the positioning of the text elements around the top coder's image.

Expected Behavior

The rank, user's name, and points should be closely and logically aligned with the profile picture. For example:

• The rank (#1) could be positioned closer to the left edge of the image.
• The name and points (Rahul 🏆 1250 pts) could be positioned closer to the right edge of the image.
• Alternatively, all elements could be contained within a single responsive card component.

Actual Behavior

The text elements are positioned far away from the profile picture, creating large, awkward gaps and a disjointed user interface.

Screenshot

The current state of the UI:

This seems to be a CSS layout issue. The container holding the image and the text elements could be converted to a flexbox or grid container to ensure proper alignment.

[samrat21saha]

@actions-user @SaitejaThadisetty @Shrutik-0101 @Aditya-Patwa please assign me this issue if anyone is not working on it for GSSoC'25