fix: tall image clipping on read alongs

[sergeleger]

PR Goal?

This PR fixes the clipping of tall images, which sometimes occurs when text column of the read along is narrow.

The applied changes are to properly implement HTML nesting rules and CSS Grid rules which lets the browser infer width and height information on the parent container of the image.

• HTML nesting rules states that inline elements like <span /> cannot contain block elements like <div />. The <img /> tag had that hierarchy (html > body > ... > div > span > div > img)

• CSS Grid rules requires that grid cells must be defined directly underneath the grid parent container, here's an incorrect implementation:

<div style="display: grid">
   <div> <!-- introduces a layer between grid parent and child -->
         <div style="grid-area: image"> ... </div>
   </div>
</div>

Correcting both issues seems to have corrected the tall image clipping problem.

Fixes?

Closes #468

Feedback sought?

Validate my assumptions. I'm also not familiar with other ReadAlongs UI design decisions that this solution breaks.

Priority?

Medium, but it is a bug reported by users.

Tests added?

No, but tests still passes after restructuring the HTML.

How to test?

To recreate the broken behavior (in production for example):

• create a new read along with a single short sentence (e.g.: this is a test)
• upload the image shared by Del (in issue Studio-W: during the Studio tour incorrect preview shown to user #428)
• notice the bottom of the image is truncated
• add a new translation for "this is a test" and type in a lot of translation text forcing the text grid to get wider and the image will eventually resize so that it is no longer clipped.

With this fix:

• create a new read along with a single short sentence (e.g.: this is a test)
• upload the image shared by Del (in issue Studio-W: during the Studio tour incorrect preview shown to user #428)
• Image is no longer clipped

Confidence?

Medium. As mentioned above, this seems to work but have I introduced breaking UI look and feel.

Version change?

[semanticdiff-com]

Review changes with  

Changed Files

File	Status
packages/studio-web/src/assets/bundle.js	100% smaller
packages/web-component/src/components/read-along-component/read-along.tsx	44% smaller

[github-actions]

PR Preview Action v1.6.3
🚀 View preview at https://ReadAlongs.github.io/Studio-Web/pr-preview/pr-501/
Built to branch gh-pages at 2025-12-23 15:25 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[deltork]

Code looks good to me!
You can move the icon to the top left by setting the margin of #img-remover to 0