fix: OG image error from missing height field #22914
Conversation
WalkthroughThe changes involve updating two image elements in the Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (08/06/25)1 reviewer was added to this PR based on Keith Williams's automation. |
| @@ -217,7 +218,7 @@ export const App = ({ name, description, slug }: AppImageProps) => ( | |||
|
|
|||
| <div tw="flex items-center w-full"> | |||
| <div tw="flex"> | |||
| <img src={`${WEBAPP_URL}${slug}`} alt="App icon" width="172" /> | |||
| <img src={`${WEBAPP_URL}${slug}`} alt="App icon" width="172" height="172" /> | |||
There was a problem hiding this comment.
Confirmed that height can be same as width here
as this is app icon from App OG image:
| @@ -151,6 +151,7 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => { | |||
| src={avatar} | |||
| alt="Profile picture" | |||
| width="160" | |||
| height="160" | |||
There was a problem hiding this comment.
Confirmed that height can be same as width here
as this is user avatar from Meeting OG image:
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/lib/OgImages.tsx (2)
148-155: Explicitheightattribute added – consider de-duplicating sizing sources
Addingheight="160"fixes the aspect-ratio issue that caused the OG image glitch – good catch.
However the effective size for these avatars is now declared in three places (twclasses,width, andheightattributes). Maintaining the same value across all of them is easy to forget next time someone tweaks the design.If you want to keep the explicit dimension for the OG renderer, you can safely drop the Tailwind
w-[160px] h-[160px]utility on Line 158, or vice-versa, to make one source of truth.
221-221: Same duplication pattern for the app icon
height="172"matches the Tailwind utility but repeats the size information. Apply the same consolidation decision here to stay consistent with the avatars.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/lib/OgImages.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/lib/OgImages.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/lib/OgImages.tsx
🧬 Code Graph Analysis (1)
packages/lib/OgImages.tsx (1)
packages/lib/constants.ts (1)
WEBAPP_URL(12-18)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Codacy Static Code Analysis
E2E results are ready! |
What does this PR do?
Error: Image size cannot be determined. Please provide the width and height of the image.coming from user avatarimgin Meeting OG image and from app iconimgin App OG imageMandatory Tasks (DO NOT REMOVE)