From 7f9e898a1ba9dff665c71e6df4723ae35d0a8c9e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 7 Oct 2022 16:51:01 +0800
Subject: [PATCH] Display the highlight bar near the cursor on non-touch
 devices

---
 .../web/components/patterns/HighlightBar.tsx  | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index b454cade3..1a95588b5 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -27,12 +27,12 @@ type HighlightBarProps = {
   anchorCoordinates: PageCoordinates
   isNewHighlight: boolean
   isSharedToFeed: boolean
-  isTouchscreenDevice: boolean
+  displayNearCursor: boolean
   handleButtonClick: (action: HighlightAction) => void
 }
 
 export function HighlightBar(props: HighlightBarProps): JSX.Element {
-  if (props.isTouchscreenDevice) {
+  if (props.displayNearCursor) {
     return (
       <Box
         css={{
@@ -58,23 +58,22 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
     )
   } else {
     return (
-      <AnchoredPopover
-        xAnchorCoordinate={props.anchorCoordinates.pageX}
-        yAnchorCoordinate={props.anchorCoordinates.pageY}
-        preventAutoFocus={false}
+      <Box
+        css={{
+          width: '100%',
+          maxWidth: '240px',
+          height: '48px',
+          position: 'absolute',
+          background: '$grayBg',
+          borderRadius: '4px',
+          border: '1px solid $grayBorder',
+          boxShadow: theme.shadows.cardBoxShadow.toString(),
+          left: props.anchorCoordinates.pageX,
+          top: props.anchorCoordinates.pageY,
+        }}
       >
-        <Box>
-          css=
-          {{
-            width: '350px',
-            background: '$grayBg',
-            borderRadius: '4px',
-            border: '1px solid $grayBorder',
-            boxShadow: '$cardBoxShadow',
-          }}
-          <BarContent {...props} />
-        </Box>
-      </AnchoredPopover>
+        <BarContent {...props} />
+      </Box>
     )
   }
 }