HTML side-by-side mode reduces size of main content more than necessary

[robertknight]

In testing HTML side-by-side mode via the html_side_by_side feature flag, I've noticed that it often reduces the size of the main content more than necessary. Depending on the size of the browser window and the content layout, this can result in content being resized when it doesn't need to be.

These gaps are not always entirely a bad thing, because they can make the visual margins to the left and right of the content more even. However reducing the content size increases the possibility of annoying layout behavior compared to when the sidebar is not in use, and it looks odd if the content gets resized when there is already enough space between the right edge of the content and the right edge of the page, to accommodate the sidebar.

Steps to reproduce:

1. Turn on the html_side_by_side feature flag
2. Go to one of the example URLs below
3. Resize the browser window to be 1200px wide (see http://howbigismybrowser.com or search the web for similar tools)
4. Load the Hypothesis client and open the sidebar

Expected result: Small gap between right edge of content and sidebar
Actual result: Big gap between right edge of content and sidebar

Example URLs:

1. https://pointersgonewild.com/2022/05/23/minimalism-in-programming-language-design/

[robertknight]

I removed the "project: video annotations" label because the video player is going to take complete control over how side-by-side mode works, so the client's default / "automatic" implementation no longer matters.

[acelaya]

Deleted this comment, as it was all built on the wrong assumption element.getBoundingClientRect().right was the distance to the right of the viewport, while it is the position of the right side from the left of the viewport. See https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

[acelaya]

After some extra debugging (now with the right assumptions in mind), I kind of think this issue is related with the fact that this particular page sets fixed widths to elements, plus a min-width on the body.

However, everything takes me in the direction that it should result in more overlapping, not less, so I'm still not 100% sure what's going on

[acelaya]

I haven't been actively working on this, so I'll un-assign myself.