Use a Popover component for the share annotation floating "bubble"

[acelaya]

Depends on https://github.com/hypothesis/client/pull/7160

The share annotation "bubble" is currently an absolute-positioned Card. This PR is a POC to replace that with a Popover.

Some issues found:

1. Popover is displayed underneath the anchor when there's space. We would like to change that behavior.
2. The arrow is not rendered, because the dynamic positioning of the Popover would require the anchor position to be calculated in real time.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 99.45%. Comparing base (d78dcb6) to head (ad2ef1a). Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7159      +/-   ##
==========================================
- Coverage   99.45%   99.45%   -0.01%     
==========================================
  Files         270      270              
  Lines       10958    10955       -3     
  Branches     2623     2621       -2     
==========================================
- Hits        10898    10895       -3     
  Misses         60       60              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[robertknight]

I noticed a slight rendering glitch where there are white pixels behind the top-left and top-right rounded corners:

I see this in Chrome, Safari and Firefox.

[robertknight]

I noticed a slight rendering glitch where there are white pixels behind the top-left and top-right rounded corners:

Setting border-radius: 0.25rem on the outer popover element, to match the inner rounded contents, resolves the issue. I don't know why yet.

[acelaya]

I noticed a slight rendering glitch where there are white pixels behind the top-left and top-right rounded corners:

Setting border-radius: 0.25rem on the outer popover element, to match the inner rounded contents, resolves the issue. I don't know why yet.

Good catch. This is because of the changes I did here https://github.com/hypothesis/frontend-shared/pull/2011/files#diff-812511814bb9e545b0977fdf9aac8521d21ec33f5087d9cf4e4f5c518e6b16a1L381-L384

I have found other issue also caused by those changes https://github.com/hypothesis/frontend-shared/pull/2013

[acelaya]

I'm going to put this back in draft, as the latest frontend-shared version has a couple regressions in the popover.

I'll get back to this once those are fixed.

[acelaya]

Putting this back as ready to review now that Popover regressions are fixed.

[robertknight]

I found an issue that the Popover styling is broken when the browser doesn't support native popovers, tested via asNativePopover={false}.

Unfortunately native popovers are still a little too new for us to rely on them being always available.

[acelaya]

I found an issue that the Popover styling is broken when the browser doesn't support native popovers, tested via asNativePopover={false}.

Unfortunately [native popovers](https://caniuse.com/?search=popover) are still a little too new for us to rely on them being always available.

I have added the classes w-[360px] max-w-[calc(100vw-3.5rem)] to the popover, only when the browser does not support the popover API.

You can test it by applying this diff:

diff --git a/src/sidebar/components/Annotation/AnnotationShareControl.tsx b/src/sidebar/components/Annotation/AnnotationShareControl.tsx
index 7fdd127cb..cc33cd2ba 100644
--- a/src/sidebar/components/Annotation/AnnotationShareControl.tsx
+++ b/src/sidebar/components/Annotation/AnnotationShareControl.tsx
@@ -130,11 +130,12 @@ function AnnotationShareControl({
         align="right"
         placement="above"
         arrow
+        asNativePopover={false}
         classes={classnames({
           // Set explicit width for browsers not supporting native popover API
           'w-[360px] max-w-[calc(100vw-3.5rem)]':
             // eslint-disable-next-line no-prototype-builtins
-            !HTMLElement.prototype.hasOwnProperty('popover'),
+            true,
         })}
       >
         <div className="p-2 flex flex-col gap-y-2">