fix: Reduce instances of pointer over floating toolbar causing flicke…

…ring Increase clickable area of toolbar buttons
impelsystems · Nov 4, 2021 · eb52297 · eb52297
1 parent 56473a6
commit eb52297
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/src/components/FloatingToolbar.tsx b/src/components/FloatingToolbar.tsx
@@ -211,6 +211,7 @@ const Wrapper = styled.div<{
     position: absolute;
     bottom: -2px;
     left: calc(50% - ${props => props.offset || 0}px);
+    pointer-events: none;
   }
 
   * {
@@ -221,7 +222,6 @@ const Wrapper = styled.div<{
     active &&
     `
     transform: translateY(-6px) scale(1);
-    pointer-events: all;
     opacity: 1;
   `};
 

diff --git a/src/components/LinkEditor.tsx b/src/components/LinkEditor.tsx
@@ -367,6 +367,7 @@ const Wrapper = styled(Flex)`
   margin-left: -8px;
   margin-right: -8px;
   min-width: 336px;
+  pointer-events: all;
 `;
 
 const SearchResults = styled.ol`

diff --git a/src/components/ToolbarButton.tsx b/src/components/ToolbarButton.tsx
@@ -15,6 +15,8 @@ export default styled.button<Props>`
   padding: 0;
   opacity: 0.7;
   outline: none;
+  pointer-events: all;
+  position: relative;
 
   &:first-child {
     margin-left: 0;
@@ -29,5 +31,14 @@ export default styled.button<Props>`
     cursor: default;
   }
 
+  &:before {
+    position: absolute;
+    content: "";
+    top: -4px;
+    right: -4px;
+    left: -4px;
+    bottom: -4px;
+  }
+
   ${props => props.active && "opacity: 1;"};
 `;