Profile avatar layout and z-index issues in public profile view

[AhmadJeddi]

🏷️ Discussion Type

Bug

💬 Feature/Topic Area

Profile

Body

Hello GitHub Team and Community,

I found a UI layout and layering issue in GitHub public profile pages when viewing a profile while logged out or in Incognito mode.

The issue does not appear when logged in.

Steps to reproduce

1. Open a GitHub profile page while logged out or using Incognito mode.
2. Observe the profile header area.
3. Scroll down the page and observe the sticky profile navigation bar.

Actual behavior

The profile avatar is incorrectly positioned in the public view.

Instead of staying inside its expected profile container, the avatar moves upward and extends outside of its container. The top part of the avatar overlaps the profile sub-navigation (UnderlineNav).

The navigation contains:

• Overview
• Repositories
• Projects
• Packages
• Stars

Additionally, when scrolling:

• The UnderlineNav becomes sticky.
• Page content correctly moves behind it.
• However, the profile avatar remains above the navigation layer and continues overlapping it.

Expected behavior

The profile avatar should remain inside its intended container and maintain the same position as the logged-in view.

When the navigation becomes sticky, it should appear above the avatar or the avatar should be properly clipped/positioned so that it does not overlap the navigation.

Technical observation

The issue appears to be related to differences in the public profile layout CSS and stacking behavior.

Possible causes:

• The profile avatar container has incorrect positioning in the logged-out view.
• The avatar container appears to create a higher stacking layer than the sticky UnderlineNav.
• The z-index relationship between the avatar and sticky navigation may not be handled correctly.

Observed behavior:

• Logged-in view: avatar position and navigation layering work correctly.
• Logged-out/incognito view: avatar positioning differs and overlaps the navigation.

Environment

• Logged out GitHub view
• Incognito mode
• Browser: Google Chrome

Profile example:
https://github.com/AhmadJeddi

Reporter

This issue was reported and investigated by Ahmad Jeddizahed (@AhmadJeddi).

Thank you for looking into this.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[AhmadJeddi]

Possible fix / Technical observation

I could not identify stable class names for these containers, so I am referring to them by their roles.

I noticed two possible CSS-related causes:

1. Profile image container positioning issue

In the logged-out/incognito view, the profile image container appears to be positioned higher than its expected section. Because of this, the image extends outside its intended container and overlaps the profile sub-navigation.

Adding additional top spacing to the profile image container (for example, an equivalent of mt-8) appears to move the image back to its expected position and prevents the overlap with the navigation.

2. Sticky navigation stacking issue

During scrolling, the sub-navigation becomes sticky.

The current stacking order appears to be:

• Profile image container: z-index: 4
• Sub-navigation container (UnderlineNav): z-index: 3

Because the profile image container has a higher stacking level, the image remains above the sticky navigation and passes over it while scrolling.

Adjusting the stacking order so that the sticky navigation is above the profile image container, or reducing the image container's stacking priority, would prevent this behavior.

Expected result:

• The profile image remains inside its correct section.
• The sticky sub-navigation stays above the image during scrolling.
• The logged-out/incognito layout matches the logged-in layout.

Animation.mp4