fix: 🐛 Fixed bug on avatars, where if the image is not square it … #2688
Conversation
… look squashed, using object-cover should fix that
BurnedChris
requested review from
perkinsjr,
chronark and
mcstepp
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
|
@BurnedChris is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe changes involve modifications to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AvatarImage
participant AvatarPrimitive
User->>AvatarImage: Request to display avatar
AvatarImage->>AvatarPrimitive: Render image with new className
AvatarPrimitive->>User: Display image with updated aspect ratio handling
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (2)apps/dashboard/components/ui/avatar.tsx (2)
The switch from
While the implementation is correct, it would be good to verify the behavior with:
Run this script to find avatar usage examples for testing: ✅ Verification successfulBased on the search results, I can see extensive usage of the Avatar component across the codebase with various image scenarios. The implementation uses
// apps/dashboard/app/(app)/user-button.tsx
<Avatar className="w-8 h-8 lg:w-5 lg:h-5">
{user.imageUrl ? <AvatarImage src={user.imageUrl} alt="Profile picture" /> : null}
<AvatarFallback>...</AvatarFallback>
</Avatar>
// apps/dashboard/app/(app)/team-switcher.tsx
<Avatar className="w-5 h-5">
{currentOrg?.imageUrl ? (
<AvatarImage src={currentOrg.imageUrl} alt={currentOrg.name ?? "Profile picture"} />
) : null}
<AvatarFallback>...</AvatarFallback>
</Avatar>
// apps/www/components/blog/blog-card.tsx
<Avatar className="w-8 h-8">
<AvatarImage alt={author.name} src={author.image.src} width={12} height={12} />
<AvatarFallback />
</Avatar>The component is being used extensively with various image types and aspect ratios, and there are no reported issues. The 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Description: Find avatar component usage to identify test cases
# Look for both direct usage and potential image prop passing
# Search for AvatarImage usage
echo "=== Direct Avatar Usage ==="
rg -l "AvatarImage" --type tsx --type jsx
# Search for potential image sources being passed to avatars
echo -e "\n=== Potential Image Props ==="
rg -A 2 "<Avatar.*?>" --type tsx --type jsx
Length of output: 283 Script: #!/bin/bash
# Search for Avatar component usage with proper file type flags
echo "=== Direct Avatar Usage ==="
rg -l "AvatarImage" -t typescript -t javascriptreact -t typescriptreact
echo -e "\n=== Potential Image Props ==="
rg -A 2 "<Avatar.*?>" -t typescript -t javascriptreact -t typescriptreact
# Also search for the Avatar component definition to understand its usage pattern
echo -e "\n=== Avatar Component Definition ==="
rg -A 10 "export.*Avatar" -t typescript -t javascriptreact -t typescriptreact
Length of output: 559 Script: #!/bin/bash
# Search for Avatar component usage without file type flags
echo "=== Direct Avatar Usage ==="
rg -l "AvatarImage"
echo -e "\n=== Potential Image Props ==="
rg -A 2 "<Avatar.*?>"
# Also search for the Avatar component definition
echo -e "\n=== Avatar Component Definition ==="
rg -A 10 "export.*Avatar"
# Find all TypeScript/React files that might contain Avatar usage
echo -e "\n=== Files that might contain Avatar ==="
fd -e tsx -e jsx -e ts
Length of output: 55878 Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
|
Amazing, tysm |
What does this PR do?
Fixes # (issue)
If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists
Type of change
How should this be tested?
Before
After;
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
Bug Fixes