Fix SVG attachment sizing and preserve provided dimensions

[deepak0x]

This change fixes an issue where SVG attachments were being resized incorrectly after the first render due to intrinsic sizing logic being re-applied... Causing the image not showing in channel

Closes #1466

What’s fixed

• Prevent SVG attachments from re-running intrinsic sizing that caused them to shrink after the initial render.
• Use the provided image_dimensions (or a consistent fallback) to keep the aspect ratio stable.
• Keep contentFit="contain" for SVGs, while leaving GIF and bitmap handling unchanged.
• Ensure container sizing uses the resolved display dimensions so small SVGs do not collapse.

---

How It Works

• Skip Image.loadAsync for SVG files to avoid intrinsic SVG sizes overriding the intended layout.
• Compute displayWidth and displayHeight from the provided dimensions (or a fallback) and maintain the correct aspect ratio.
• Update container min-size logic to reference the computed display dimensions instead of intrinsic image sizes.

---

Visual Comparison

Before (Issue)	After (Fixed)

Summary by CodeRabbit

• Bug Fixes
  • Improved image rendering and sizing in messages using supplied image dimensions for more accurate display.
  • Fixed sizing calculations to ensure consistent display across attachment types and enforce a sensible minimum thumbnail size.
  • Resolved SVG scaling issues so vector images preserve aspect and render correctly.
  • Enhanced loading flow with better error handling to reduce broken or incorrectly sized images.

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

[coderabbitai[bot]]

Walkthrough

Image dimension data is passed from the file object through the container to the MessageImage component. MessageImage now accepts optional provided dimensions, synchronizes them to state, applies SVG-specific sizing guards, computes display dimensions with fallbacks and minimums, and uses those dimensions in rendering and contentFit selection.

Changes

Cohort / File(s)	Summary
Type definition app/containers/message/Components/Attachments/Image/definitions.ts	Added optional imageDimensions?: { width?: number; height?: number } to IMessageImage.
Container prop wiring app/containers/message/Components/Attachments/Image/Container.tsx	Pass file.image_dimensions as new imageDimensions prop to MessageImage.
Image component behavior app/containers/message/Components/Attachments/Image/Image.tsx	Accept imageDimensions (as providedDimensions) in props; initialize and sync state from provided dimensions; detect SVGs and skip intrinsic sizing for them; load image on downloaded status with error handling to update dimensions; compute displayWidth/displayHeight with fallbacks and clamp minimums; require positive area to render image; set contentFit to contain for SVGs and cover otherwise; update styles to use computed dimensions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review areas: SVG detection and early-return guards; effects that sync provided dimensions to state; image load/error handling and dimension extraction; display dimension calculation and minimum clamping; rendering conditions that require positive area.

Poem

🐰 I nudged the pixels, soft and bright,
Passed widths and heights to set them right,
SVGs I treat with gentle care,
So every image shows up there,
Hop, snap — the channel's full of light! 📸✨

Pre-merge checks and finishing touches

✅ 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 changes: fixing SVG attachment sizing and preserving provided dimensions.
Linked Issues check	✅ Passed	The code changes directly address issue #1466 by preventing SVG resizing after initial render, using provided dimensions, and maintaining correct display sizing.
Out of Scope Changes check	✅ Passed	All changes are scoped to Image component modifications needed to fix SVG rendering and dimension handling; no unrelated alterations detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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