SD-2468 - fix: image not being contained within cell#2775
SD-2468 - fix: image not being contained within cell#2775chittolinag wants to merge 2 commits intomainfrom
Conversation
| // Position and z-index on the image only (not the line) so resize overlay can stack above. | ||
| img.style.position = 'relative'; | ||
| img.style.zIndex = '1'; | ||
| img.style.maxWidth = '100%'; |
There was a problem hiding this comment.
Any thoughts on something that could break by changing this here? To me, this seems like the right approach because maxWidth simply tells the browser to not overflow the maximum allowed width, but it will still try to render the original size of the image. If the parent's size is smaller than the original image size, the image will be contained within.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fcd6053597
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| // Position and z-index on the image only (not the line) so resize overlay can stack above. | ||
| img.style.position = 'relative'; | ||
| img.style.zIndex = '1'; | ||
| img.style.maxWidth = '100%'; |
There was a problem hiding this comment.
Preserve aspect ratio when constraining inline image width
renderImageRun sets both img.width and img.height earlier, so this new maxWidth constraint can shrink only the rendered width in narrow containers while the fixed height remains, which visibly distorts inline images and can still blow out row height in tables. To avoid introducing that regression, the width cap should be paired with auto-height behavior when responsive shrinking occurs.
Useful? React with 👍 / 👎.
Issue
When images are inserted into a table cell, depending on the image size, it is overflowing the cell size.
Proposed solution
For inline images, set a
maxWidthso it's scaled down (keeping the aspect ratio) when the original size would overflow the parent's size.