Skip to content

[avatar]: shape should remain circular when space is limited #14232

@DintaMel

Description

@DintaMel

monday.com sync: #11703122416

Check existing issues

Which Component

Avatar

Actual Behavior

When space is limited, the avatar shape becomes ovular. This also impacts Navigation User since Avatar is used within it.

Avatar example
Image

Navigation User example
Image

Expected Behavior

The shape of the avatar should remain round regardless of space constraints.

Reproduction Sample

https://codepen.io/DintaMel-the-lessful/pen/wBzEmeV?editors=1000

Reproduction Steps

Avatar

  1. Open codepen
  2. Observe oval-shaped avatars

Avatar within Navigation User

  1. Open Codepen
  2. Observe oval-shaped avatars within Navigation User

Reproduction Version

5.0.2

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/calcite-ui-icons
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Calcite (dev)Issues logged by Calcite developers.bugBug reports for broken functionality. Issues should include a reproduction of the bug.c-avatarIssues that pertain to the calcite-avatar componentcalcite-componentsIssues specific to the @esri/calcite-components package.impact - p3 - not time sensitiveUser set priority impact status of p3 - not time sensitiveneeds triagePlanning workflow - pending design/dev review.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions