Skip to content

[Bug]: Avatar becomes stretched and loses circular shape when the author name or description is long #560

@pratyush07-hub

Description

@pratyush07-hub

Affected Page URL

https://www.sugarlabs.org/

Bug Description

The profile avatar in the Testimonials section becomes stretched and loses its circular shape when the testimonial author description is long. For example, the testimonial by Richard Hermann has a long designation line, and this causes the avatar to appear oval instead of perfectly round.

Expected behavior: The avatar should always remain a fixed circular shape regardless of the text length or card height.

Steps to Reproduce

  1. Go to the Testimonials section on the website.
  2. Scroll to the testimonial written by "Richard Hermann".
  3. Observe that the long author description stretches the profile avatar vertically.
  4. Avatar is no longer circular.

Browser

Chrome

Device Type

Desktop

Screenshots

Image

Console Errors

No console errors observed.

Additional Context

Issue seems to be caused by the avatar container not having fixed width and height or missing object-fit: cover, causing it to stretch when the card height grows.

Code of Conduct

  • I have searched for similar issues before creating this one
  • I understand this is a bug report for the website only, not Sugar Labs software
  • I agree to follow the project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions