UI/UX Issue: Heading Alignment and Design - Profile Rank (FitFinder)

[Srushtee1706]

UI/UX Issue: Heading Alignment and Design - Profile Rank (FitFinder)
Summary

The heading "Profile Rank (FitFinder)" appears to have an improper design or alignment, specifically regarding its position in the left corner of the UI element shown in the screenshot. It does not look visually polished and may indicate issues with padding, margin, or font styling within the containing card/box.

Component Affected

Component Name: Profile Rank Card/Container

Location: Left side of the element displayed in the screenshot.

Details

Alignment/Spacing: The heading is positioned too close to the left edge of its container, lacking appropriate left padding or margin, making it feel 'cramped' against the corner.

Visual Polish: The overall design of the heading (font size, weight, and proximity to the edge) does not achieve a professional, polished look.

Consistency (Potential): This might be inconsistent with other headings or card designs across the application. (This should be verified by the developer.)

Suggested Fixes (Design/Development)

Design:

Increase the left padding on the container element to give the text breathing room.

Review the font size and weight to ensure it aligns with the application's overall design system for section headings.

Development:

Check the CSS properties (padding-left, margin-left) for the heading element or its parent container. Adjust these values to push the text away from the left edge.

Ensure the component adheres to established design tokens or styles for headings.

Screenshot

[durdana3105]

Please assign this to me i want to work on it

[Sitaram8472]

Hi @Srushtee1706 thanks for creating the issue.

I’m assigning this to you

Please first update your branch with the main branch, then fix the bug.
Let me know if you need any help.

Thanks!