fix: center profile image properly with object-center

[bimakw]

Summary

• Add object-cover and object-center classes to ensure profile images are properly centered within their container
• Fix applied to both OptimizedAvatarImage component (Next.js Image) and AvatarImage component for consistency

Problem

After uploading and cropping an image that appears centered in the crop dialog, the final rendered image displays slightly shifted to the right instead of being centered.

Solution

The issue was that the image elements were missing explicit object-position: center CSS. While object-fit: cover was applied, the default object-position can vary across browsers. Adding object-center (Tailwind class for object-position: center) ensures consistent centering.

Changes

• apps/web/src/components/optimized-avatar-image.tsx: Replace style={{ objectFit: "cover" }} with className="object-cover object-center"
• packages/ui/src/avatar.tsx: Add object-cover object-center to AvatarImage component

Test Plan

• Upload a profile image with distinct center content
• Verify the image appears centered in the avatar display
• Test on different browsers (Safari, Chrome, Firefox)

Fixes #2014

Summary by CodeRabbit

• Style
  • Updated avatar components to use Tailwind CSS utilities for image positioning and sizing, replacing inline style approaches while maintaining consistent visual behavior across avatar elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@bimakw is attempting to deploy a commit to the rallly Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

Two avatar components are updated to replace inline object-fit styling with Tailwind classes (object-cover and object-center) for improved image centering and positioning consistency.

Changes

Cohort / File(s)	Summary
Avatar image centering styles apps/web/src/components/optimized-avatar-image.tsx, packages/ui/src/avatar.tsx	Converted inline style object-fit property to Tailwind classes. optimized-avatar-image.tsx now uses className="object-cover object-center" in the Image component. avatar.tsx expands AvatarImage className from "aspect-square h-full w-full" to "aspect-square h-full w-full object-cover object-center".

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• ✨ Use avatar on login page #1336: Modifies the same avatar components (optimized-avatar-image.tsx and packages/ui/src/avatar.tsx) with related styling and rendering adjustments.
• ♻️ Standard avatar sizes #1375: Updates the optimized-avatar-image.tsx component with sizing logic and prop changes alongside styling modifications.
• 💄 Update avatar component #1812: Modifies avatar components with related Avatar/AvatarImage styling and sizing adjustments.

Poem

🐰 A hop, a skip, an image centered right,
No more rightward drift, the crop now fits just tight,
Tailwind classes dance where inline styles used to dwell,
Avatar perfection—our fluffy friends can tell! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: center profile image properly with object-center' directly describes the main change: adding object-center styling to center profile images.
Linked Issues check	✅ Passed	The PR addresses issue #2014 by adding object-cover and object-center Tailwind classes to two avatar components, which fixes the profile image centering issue reported.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the profile image centering issue across two avatar-related components with no unrelated modifications.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 708f797 and d1acf4b.

📒 Files selected for processing (2)

• apps/web/src/components/optimized-avatar-image.tsx (1 hunks)
• packages/ui/src/avatar.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (10)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Use dayjs for date handling
Use react-query for data fetching
Prefer implicit return values over explicit return values
Use zod for form validation
Create separate import statements for types
Prefer using the React module APIs (e.g. React.useState) instead of standalone hooks (e.g. useState)
Prefer double quotes for strings over single quotes
Only add comments when it is necessary to explain code that isn't self-explanatory

**/*.{ts,tsx}: Only create named interfaces when they're reused or complex
When TypeScript errors occur for missing i18n keys, run pnpm i18n:scan instead of manually adding keys

Files:

• packages/ui/src/avatar.tsx
• apps/web/src/components/optimized-avatar-image.tsx

**/*.{tsx,css,config.ts}

📄 CodeRabbit inference engine (.cursorrules)

Use tailwindcss for styling

Files:

• packages/ui/src/avatar.tsx
• apps/web/src/components/optimized-avatar-image.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursorrules)

**/*.tsx: Use react-hook-form for form handling
All text in the UI should be translated using either the Trans component or the useTranslation hook
Prefer composable components in the style of shadcn UI over large monolithic components
DropdownMenuItem is a flex container with a preset gap so there is no need to add margins to the children
The size and colour of an icon should be set by wrapping it with the component from @rallly/ui/icon which will give it the correct colour and size
Keep the props of a component as minimal as possible. Pass only the bare minimum amount of information needed to it
All text in the UI should be translatable
Use the component in client components from @/components/trans with the defaults prop to provide the default text
Always use a composable patterns when building components
Use cn() from @rallly/ui to compose classes
Add the "use client" directive to the top of any .tsx file that requires client-side javascript

Files:

• packages/ui/src/avatar.tsx
• apps/web/src/components/optimized-avatar-image.tsx

**/*.{ts,tsx,json}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,json}: i18n keys are in camelCase
i18nKeys should describe the message in camelCase. Ex. "lastUpdated": "Last Updated"
If the i18nKey is not intended to be reused, prefix it with the component name in camelCase

Files:

• packages/ui/src/avatar.tsx
• apps/web/src/components/optimized-avatar-image.tsx

packages/ui/**/*.tsx

📄 CodeRabbit inference engine (.cursorrules)

shadcn-ui components should be added to packages/ui

Files:

• packages/ui/src/avatar.tsx

**/*

📄 CodeRabbit inference engine (.cursorrules)

Always use kebab-case for file names

Files:

• packages/ui/src/avatar.tsx
• apps/web/src/components/optimized-avatar-image.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use Biome for code formatting with indent of 2 spaces and double quotes

Files:

• packages/ui/src/avatar.tsx
• apps/web/src/components/optimized-avatar-image.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{tsx,ts}: Prefer inline prop types over named interfaces for simple component props (e.g., function Component({ prop }: { prop: string }) instead of defining a separate interface)
Always use the useDialog hook from @rallly/ui/dialog for managing dialog state instead of manual useState for open/close state
Use TanStack Query with tRPC for server state management
Use React Context for client state (auth, preferences, etc.)
Use react-hook-form with Zod validation for form state management
Use TailwindCSS with custom design system for styling

Files:

• packages/ui/src/avatar.tsx
• apps/web/src/components/optimized-avatar-image.tsx

apps/web/src/components/**

📄 CodeRabbit inference engine (CLAUDE.md)

Place shared components in apps/web/src/components/

Files:

• apps/web/src/components/optimized-avatar-image.tsx

apps/web/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (apps/web/.cursor/rules/better-auth.md)

apps/web/**/*.{ts,tsx,js,jsx}: When using the username plugin, require all sign up endpoints to accept a username (used for login, normalized) and an optional displayUsername (raw, for display purposes).
When using the username plugin, all username values must be normalized according to the configuration function before storage or comparison (default: lowercase).
Whenever updating a user's username, always check for uniqueness and apply the normalization procedure.
Login endpoints or forms supporting username authentication must allow signing in with username and password, not just email.

Files:

• apps/web/src/components/optimized-avatar-image.tsx

🧠 Learnings (2)

📚 Learning: 2025-11-25T11:03:55.173Z

Learnt from: CR
Repo: lukevella/rallly PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T11:03:55.173Z
Learning: Applies to **/*.tsx : Use `cn()` from rallly/ui to compose classes

Applied to files:

• packages/ui/src/avatar.tsx

📚 Learning: 2025-11-25T11:03:55.173Z

Learnt from: CR
Repo: lukevella/rallly PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T11:03:55.173Z
Learning: Applies to **/*.tsx : The size and colour of an icon should be set by wrapping it with the <Icon> component from rallly/ui/icon which will give it the correct colour and size

Applied to files:

• packages/ui/src/avatar.tsx

🔇 Additional comments (2)

apps/web/src/components/optimized-avatar-image.tsx (1)

30-30: LGTM! Image centering fix applied correctly.

The Tailwind classes object-cover and object-center properly address the profile image centering issue. This replaces the previous inline style approach and follows the project's coding guidelines for Tailwind usage.

packages/ui/src/avatar.tsx (1)

44-47: LGTM! Proper use of cn() for composing classes.

The addition of object-cover and object-center classes ensures consistent image positioning within the avatar container. The use of cn() correctly follows the coding guidelines and retrieved learnings for class composition.

---

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.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
app	Ready	Preview, Comment	Dec 23, 2025 9:57am

[lukevella]

Hi @bimakw, thanks for trying to fix this issue. Unfortunately your changes don't seem to address the issue which is that the original image is being cropped by a few pixels on the right and bottom sides. The issue will be in how we process the image rather than how it is presented.

If you'd like to have another shot at this, I would suggest using this image to test the fix: