fix: size and crop Studio profile avatars

[edschema]

Description

This PR fixes the bug @bradenmacdonald raised in reviewing the avatar fix openedx/frontend-app-authoring#3043

This updates the previously merged #670 fix to properly render circular images, and removes the unused .avatar... I incorrectly assumed it was some legacy contract, but given the discovery in #673 , I just removed it.

Prior to #670: No avatar images ever loaded

StudioHeader passed only authenticatedUser.avatar to the Studio user menu.
UserMenu already had two rendering paths:

• When an avatar URL was present, it rendered a raw <img> with d-block w-100 h-100.
• When no URL was present, it rendered Paragon’s Avatar with size="sm" and mr-2.
• used the unsupported authenticatedUser.avatar

Studio did not read the uploaded profile image exposed through the hydrated authenticatedUser.profileImage data, so uploaded Open edX profile images did not reach the raw-image path.

#670: Added Avatar images when available

#670 updated StudioHeader to use the hydrated profile image when available:

• Continue preferring authenticatedUser.avatar.
• Otherwise use profileImage.imageUrlMedium when profileImage.hasImage is true.
• Otherwise preserve the existing fallback avatar.

The companion Authoring change, openedx/frontend-app-authoring#3043, enables authenticated-user hydration so Studio can receive that profile-image data.

#670 intentionally changed only avatar URL selection. It did not change how UserMenu presents an avatar after receiving a URL.

When tested, the image rendered as expected, but w-100 h-100 made the menu button layout to determine the image dimensions causing the issue Braden found.

This PR

This PR replaces the separate raw-image and fallback branches with the existing Paragon Avatar component for both states. The selected profile-image URL is passed through src, allowing Paragon to provide:

• The existing small fixed avatar size.
• Circular clipping.
• Cover behavior for non-square images.
• Consistent spacing and alignment.

This PR also removes the unsupported authenticatedUser.avatar and now selects profileImage.imageUrlMedium when profileImage.hasImage is true. The change preserves the accessible name, mr-2 spacing, and avatar-image / avatar-icon test hooks.

This is the sizing and cropping follow-up reported in #673, with cleanup to remove authenticatedUser.avatar

Tests Done

• npm test -- --runTestsByPath src/studio-header/StudioHeader.test.tsx --runInBand — 1 suite and 15 tests passed.
• npm run types — passed.
• git diff --check — passed.
• Manually checked uploaded and fallback avatars in the local component harness at desktop and mobile widths.
• Manually checked an uploaded profile image in Tutor-dev Authoring with authenticated-user hydration enabled; the image loaded correctly and rendered as a circular Studio avatar.

AI Assistance

AI tools were used to aid in diagnosis, planning, implementation, and review. All work was manually verified.

[openedx-webhooks]

Thanks for the pull request, @edschema!

This repository is currently maintained by @openedx/committers-frontend.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

---

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.97%. Comparing base (e380431) to head (b94956f).

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #678      +/-   ##
==========================================
- Coverage   73.07%   72.97%   -0.11%     
==========================================
  Files          60       60              
  Lines         520      518       -2     
  Branches      110      107       -3     
==========================================
- Hits          380      378       -2     
  Misses        137      137              
  Partials        3        3              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.