Annotate/Highlight dialogue box detached from selected text

[dhimmel]

We're interested in using the hypothesis javascript client for our Manubot HTML pages (manubot/rootstock#90). We want to apply Hypothesis to pages like https://greenelab.github.io/manubot-rootstock/.

However, when we add Hypothesis like https://via.hypothes.is/https://greenelab.github.io/manubot-rootstock/, there's an issue with the dialogue box placement:

The annotation options appear far away from the actual point of highlighting. Not sure whether this is an issue with our CSS or a Hypothesis client issue. Hat tip to @RaoOfPhysics for bringing this issue to our attention.

[dsiddy]

@dhimmel, thanks for the heads-up. When I set margin-left: 0 on your website's html element, the Hypothesis adder appears in the correct position, so I'm guessing there's something similar to #487 at work here. (The relevant file, for troubleshooting's sake, is src/annotator/adder.js.)

[dhimmel]

Thanks @dsiddy. I'm interested in the potential fix you've discovered.

Our CSS currently includes.

/***Page margins when printing***/
@page { 
    margin-top: 19mm;
    margin-bottom: 16mm;
    margin-left: 0mm;
    margin-right: 0mm;
}

However, the @page presumably only affects the printed document. Do you have a suggestion for how we would change our CSS for Hypothesis to work?

P.S. feel free to submit a PR to Manubot, if you feel so inclined.

[dsiddy]

Sorry for the belated reply, @dhimmel. I just accepted your invitation and submitted a pull request (manubot/rootstock#95) that should resolve the issue.

[dhimmel]

Closed in manubot/rootstock@d209731. Thanks @dsiddy for the fix!