Fixed image sizing bug in avatar component

[andreyjamer]

I found a small bug in FwbAvatar component. If the image is not square, then there it is displayed improperly.
Here is the example:
Avatar has width 150 and height 120 pixels

By default img tag has object-fit: fill, so that's why images are displayed this way.

I added object-cover class for img tag in avatar component. And here is the same avatar with my fix:

P.S. Is there any chance to get a new release of the library in npm? There were a number of fixes in main branch, but the latest version 0.2.1 was released in April 2025.

Summary by CodeRabbit

• Style
  • Improved avatar image presentation to consistently cover its container when a valid image is available, resulting in better cropping and visual balance.
  • Enhances UI polish by preventing letterboxing or awkward spacing in avatar thumbnails across layouts and sizes.

[netlify]

✅ Deploy Preview for sensational-seahorse-8635f8 ready!

Name	Link
🔨 Latest commit	72adc43
🔍 Latest deploy log	https://app.netlify.com/projects/sensational-seahorse-8635f8/deploys/68d53a27a01dfa0008c9a879
😎 Deploy Preview	https://deploy-preview-407--sensational-seahorse-8635f8.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

A presentation-only change adds the "object-cover" CSS class to the image element in FwbAvatar.vue when a valid image is present (img && !imageError). No logic, data flow, or error handling changes are introduced.

Changes

Cohort / File(s)	Summary
Avatar image styling src/components/FwbAvatar/FwbAvatar.vue	Adds class="object-cover" to the img element when img && !imageError, affecting only visual rendering.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

🪲 bug

Suggested reviewers

• Sqrcz

Poem

A whisker twitch, a CSS cover,
The avatar snug, no spillover.
I hop through code with careful cheer,
A tiny tweak, the picture clear.
Ears up high—job in clover! 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly identifies the core change—correcting the image sizing bug in the avatar component—and uses concise, descriptive language that a teammate can quickly understand.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 16fb867 and 72adc43.

📒 Files selected for processing (1)

• src/components/FwbAvatar/FwbAvatar.vue (1 hunks)

🔇 Additional comments (1)

src/components/FwbAvatar/FwbAvatar.vue (1)

7-11: LGTM: object-fit now behaves as expected

Adding the static object-cover class fixes the aspect-ratio issue while still letting avatarClasses supply sizing and border modifiers. No further changes needed.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews: pre_merge_checks: custom_checks: - name: "Undocumented Breaking Changes" mode: "warning" instructions: |  Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Sqrcz]

Nice catch! Thanks.