Alignment issues with translations in editor display when zooming in and out

[kseniaryzhova]

Describe the bug
Misalignment of the English translation when side-by-side with the transcription. It appears as though the lines are doubled up, so the text from the line below is just superimposed over the first line, making it illegible.

To reproduce
Steps to reproduce the behavior:

1. Go to public search.
2. Search for documents with a digital transcription and a digital translation.
3. In the module, open up the transcription and translation side by side.
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Device information

• MR is using Safari 17.1. KR had no issues on PC. Ben could not reproduce initially.

[blms]

Turns out this is related to zooming in and out with the browser. The line heights are hard coded to a number of pixels, so the alignment fails when the pixel numbers are changed by zoom.

Workaround until fix is to zoom back to normal zoom (Cmd 0 on Mac or Ctrl 0 on windows).

[blms]

It's surprisingly difficult to get an accurate height for an element when the browser has been zoomed in.

This might help, but it's not yet supported in Safari:
https://web.dev/articles/device-pixel-content-box
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize

We'll stick with the workaround for now, until/unless this becomes higher priority.