Skip to content

SD-2468 - fix: image not being contained within cell #2775

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chittolinag wants to merge 3 commits into
base: main
Choose a base branch
from
+1 −0
Open

SD-2468 - fix: image not being contained within cell #2775

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8191b84
fix: image not being contained within cell
chittolina Apr 10, 2026
fcd6053
Merge branch 'main' into gabriel/sd-2468-bug-image-within-cells-not-r…
chittolinag Apr 10, 2026
9b6c282
Merge branch 'main' into gabriel/sd-2468-bug-image-within-cells-not-r…
chittolinag Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/layout-engine/painters/dom/src/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5253,6 +5253,7 @@ export class DomPainter {
// 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%';
Copy link
Copy Markdown
Contributor Author

@chittolinag chittolinag Apr 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge 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 👍 / 👎.

Copy link
Copy Markdown
Contributor

@caio-pizzol caio-pizzol Apr 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested this with the ticket's repro — this line doesn't run for e-sign signatures. they take a different route (line 5505), which already sets maxWidth: 100%; height: auto on the image.

what's actually wrong is at packages/layout-engine/measuring/dom/src/index.ts:1696:

const annotationWidth = textWidth + annotationHorizontalPadding;

it sizes the cell from the label text ("Signature" ≈ 68px) and ignores the image. so the cell stays tiny and a real signature gets squeezed in. height has a special case at lines 1702-1711; width doesn't.

was your repro a regular image rather than an e-sign signature?

Copy link
Copy Markdown
Contributor Author

@chittolinag chittolinag Apr 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@caio-pizzol thanks for the thoughtful review!

The fix I am proposing here is specifically for signatures drawn on esign that end up populating the signature into the document. When I execute the esign component locally (the demo app), this line gets executed, and that seems to be fixing the issue. Note that we're not talking about the actual component where we draw the signature, but instead the place it's populated into (in the document).

I just added a log there to validate. Let me know if you'd like to join on a call to take a look at it together!

Screenshot 2026-04-13 at 10 29 40

}

// Apply rotation and flip transforms from OOXML a:xfrm
Expand Down