fix: preserve aspect ratio for URL image previews

[TasfinMahmud]

Description

Fixes #40289

Images shared via URL previews (e.g., Giphy GIFs) were being stretched to fill the Box dimensions independently, causing distorted aspect ratios.

Added object-fit: contain and width: auto to MessageGenericPreviewImage so images scale proportionally within the maxHeight constraint.

Changes

• Added CSS properties to the inline style prop of MessageGenericPreviewImage in UrlImagePreview.tsx to maintain aspect ratios.
• • Kept the maxHeight boundary provided by useOembedLayout().
• • Added a patch changeset.

Checklist

• I have read the Contributing to Rocket.Chat guide.
• - [x] My pull request name is descriptive and begins with one of the prefixes [NEW], [IMPROVE], [FIX], [BREAK], [CHORE], [DOC].

Summary by CodeRabbit

• Bug Fixes
  • Fixed incorrect aspect ratios in URL image previews (such as Giphy GIFs) to ensure images display with proper proportions while respecting designated size constraints.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

🦋 Changeset detected

Latest commit: 73f3993

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 41 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/http-router	Patch
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/models	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-contexts	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/abac	Patch
@rocket.chat/federation-matrix	Patch
@rocket.chat/license	Patch
@rocket.chat/media-calls	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/omni-core-ee	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/instance-status	Patch
@rocket.chat/omni-core	Patch
@rocket.chat/server-fetch	Patch
@rocket.chat/ui-video-conf	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: df4bb133-79f7-4703-b257-6ee8eca2eddd

📥 Commits

Reviewing files that changed from the base of the PR and between 3d0b533 and 73f3993.

📒 Files selected for processing (2)

• .changeset/fix-url-image-aspect-ratio.md
• apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (1)

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

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx

🧠 Learnings (2)

📚 Learning: 2026-03-16T21:50:37.589Z

Learnt from: amitb0ra
Repo: RocketChat/Rocket.Chat PR: 39676
File: .changeset/migrate-users-register-openapi.md:3-3
Timestamp: 2026-03-16T21:50:37.589Z
Learning: For changes related to OpenAPI migrations in Rocket.Chat/OpenAPI, when removing endpoint types and validators from rocket.chat/rest-typings (e.g., UserRegisterParamsPOST, /v1/users.register) document this as a minor changeset (not breaking) per RocketChat/Rocket.Chat-Open-API#150 Rule 7. Note that the endpoint type is re-exposed via a module augmentation .d.ts in the consuming package (e.g., packages/web-ui-registration/src/users-register.d.ts). In reviews, ensure the changeset clearly states: this is a non-breaking change, the major version should not be bumped, and the changeset reflects a minor version bump. Do not treat this as a breaking change during OpenAPI migrations.

Applied to files:

• .changeset/fix-url-image-aspect-ratio.md

📚 Learning: 2026-03-27T14:52:56.865Z

Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

• apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx

🔇 Additional comments (2)

.changeset/fix-url-image-aspect-ratio.md (1)

1-5: Changeset classification and description look correct.

Patch bump and summary are aligned with the bug-fix scope and PR objective.

apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx (1)

11-18: Aspect-ratio fix is implemented correctly in the preview rendering path.

The updated sizing and overflow constraints are coherent with the intended behavior for proportional image display within oEmbed limits.

---

Walkthrough

A patch release for @rocket.chat/meteor adds CSS fixes to the UrlImagePreview component to correct distorted aspect ratios in image previews (e.g., Giphy GIFs) by constraining overflow and applying object-fit: contain with width: auto sizing.

Changes

Image Aspect Ratio Fix

Layer / File(s)	Summary
Component Styling apps/meteor/client/components/message/content/urlPreviews/UrlImagePreview.tsx	Box adds overflow='hidden'; MessageGenericPreviewImage receives inline style with maxHeight, width: 'auto', maxWidth: '100%', and objectFit: 'contain'. data-id attribute added to image.
Release Documentation .changeset/fix-url-image-aspect-ratio.md	Changeset entry documenting patch-level fix for aspect ratio correction in @rocket.chat/meteor.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

type: bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing aspect ratio preservation for URL image previews, which directly addresses the core issue.
Linked Issues check	✅ Passed	The changes directly implement the objective from issue #40289 by applying object-fit: contain and width: auto to fix distorted aspect ratios in URL-previewed images.
Out of Scope Changes check	✅ Passed	All changes are within scope: the CSS modifications to UrlImagePreview.tsx address the aspect ratio issue, and the changeset documents the fix appropriately.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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