Allow host to provide configuration for side-by-side mode

[lyzadanger]

As discussed in this Slack thread (requires Hypothesis team access), we think it would be helpful to expose a few options related to HTML side-by-side mode to host documents.

Specifically:

• Allow the host to define the minimum content width (in pixels), below which the sidebar will lay on top of content instead of beside it. Currently this threshold is hard-coded.
• Allow the host to determine the behavior of side-by-side mode:
  1. "off" - opt out entirely
  2. "auto" - (in which the sidebar code uses some heuristics to try to adjust space in the host page) (default)
  3. "all" (or something similar) - Only adjust the styling of the body element; don't try to sniff out content or be clever about eating up extra space.

The specific use case I'm trying to solve right now is in the video-annotation app on via:

• The hard-coded minimum width threshold for applying side-by-side mode does not mesh well with the host layout here.
• Side-by-side mode will attempt to consume any right-hand space in the host document that it determines to be expendable based on a few heuristics. This results in an unpredictable amount of right space in this layout, making right-hand layout elements inconsistent across screen sizes and sidebar states. This layout is heavily right-aligned, so this has caused some grief and hackery.

[acelaya]

Posting here what has been aligned by the FE team, regarding this issue.

Instead of implementing everything described here, we will go with a simplified version for now, where the configuration for side-by-side that hosts can provide will for now only allow mode: 'auto' | 'manual'.

• auto will make it work as it does now, so it will be considered the default value, and potentially be affected by the currently existing feature flag.
• manual just indicates the desire of the host to take full control of side-by-side, disabling the logic the client applies.

The host app then can use this in combination with the custom hypothesis:layoutchanged event, in order to adapt the contents to properly display the sidebar as desired (side-by-side, overlapping, etc).

In future we may allow providing extra options, or even extra modes.