Keep Transcription Workspace On Screen

[thehabes]

Summary

Fixes #551 — a transcription line that boxes a tall region (a full un-split column, a tall decoration, etc.) was sizing #imgTop so large that #transWorkspace and the #imgBottom preview got pushed below the viewport. Body is overflow: hidden, so the editor for the active line became unreachable.

What changed

components/simple-transcription/index.js

• Added #updateImgTopMaxHeight() — caps #imgTop's max-height to imageContainer.clientHeight - workspaceHeight - 40px, floored at 120px so we never collapse it on weird layouts.
• Hooked it up two ways:
  • ResizeObserver on #transWorkspace so the cap recomputes whenever tools open/close change the workspace's height.
  • handleResize() now calls it as well, so viewport resizes pick up the new .image-container height (pinned at 100vh).
• Observer is registered with renderCleanup so it disconnects on re-render / disconnect.

No changes to canvas-panel rendering, zoom math, or the line-overlay alignment — #imgTop keeps its natural sizing from adjustImages() and is only clamped at the top end via max-height.

[github-actions]

🚀 Deployed on https://6a04cf1fc7340d84bec2fa26--tpen-interfaces-preview.netlify.app

[cubap]

tested with three things and it worked every time