Ensure `<hypothesis-*>` elements do not clip their contents

Work around an issue on OpenStax pages where a `* { overflow: auto }` rule
causes `<hypothesis-*>` elements to clip their contents. This issue prevented
the adder toolbar from being shown when text was selected.

I chose to use a `:host` rule here so that the rule could be colocated in the
same stylesheet as the rest of the styles related to these elements. However
this does mean that `!important` needs to be used for any rule that might
conflict with a host page rule. See Stack Overflow links in comments.

Fixes #4641

src/styles/annotator/annotator.scss

@@ -7,6 +7,17 @@
 @use './components';
 @use './utilities';
 
+// Styles for `<hypothesis-*>` elements in the host page.
+//
+// `:host` rules have lower precedence than global CSS, unless `!important` is used.
+// See https://stackoverflow.com/questions/54821175/.
+:host {
+  // Our host elements have zero width/height, as they are just containers for
+  // the shadow roots. Therefore we must override any page styles which would
+  // cause them to clip their contents. See eg. https://github.com/hypothesis/client/issues/4641.
+  overflow: visible !important;
+}
+
 // Styles for all top-level elements in shadow roots.
 :host > * {
   @apply font-sans;