diff --git a/src/components/menu/MenuButton/styles.module.scss b/src/components/menu/MenuButton/styles.module.scss index d2d3e973..e3c01533 100644 --- a/src/components/menu/MenuButton/styles.module.scss +++ b/src/components/menu/MenuButton/styles.module.scss @@ -1,10 +1,10 @@ +@import "src/styles/variables.scss"; + .menu { position: relative; cursor: pointer; } -@import "src/styles/variables.scss"; - .popper { @include outer_shadow; @@ -32,32 +32,5 @@ } .arrow { - width: 0; - height: 0; - border-style: solid; - position: absolute; - - [data-popper-placement*='bottom'] & { - border-width: 0 10px 10px 10px; - border-color: transparent transparent lighten($menu_bg, 6%) transparent; - top: -10px; - } - - [data-popper-placement*='top'] & { - border-width: 10px 10px 0 10px; - border-color: lighten($menu_bg, 6%) transparent transparent transparent; - bottom: -10px; - } - - [data-popper-placement*='right'] & { - border-width: 10px 10px 10px 0; - border-color: transparent lighten($menu_bg, 6%) transparent transparent; - left: -10px; - } - - [data-popper-placement*='left'] & { - border-width: 10px 0 10px 10px; - border-color: transparent transparent transparent lighten($menu_bg, 6%); - right: -10px; - } + @include popper_arrow; } diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx index ff9fd5ed..5a89915b 100644 --- a/src/components/tags/TagAutocomplete/index.tsx +++ b/src/components/tags/TagAutocomplete/index.tsx @@ -35,15 +35,17 @@ const TagAutocomplete: VFC = ({ ); const scroll = useRef(null); const wrapper = useRef(null); + const [arrowElement, setArrowElement] = useState(null); const pop = usePopper(wrapper?.current?.parentElement, wrapper.current, { placement: 'bottom-end', strategy: 'fixed', modifiers: [ + { name: 'arrow', options: { element: arrowElement } }, { name: 'offset', options: { - offset: [0, 4], + offset: [0, 10], }, }, ], @@ -93,6 +95,7 @@ const TagAutocomplete: VFC = ({ style={pop.styles.popper} {...pop.attributes.popper} > +