diff --git a/src/components/Popover/Popover.module.scss b/src/components/Popover/Popover.module.scss index b4a746bb..115eb1e8 100644 --- a/src/components/Popover/Popover.module.scss +++ b/src/components/Popover/Popover.module.scss @@ -68,19 +68,19 @@ // Arrows .isRootAtTop > .arrow { - top: 100%; + top: calc(100% - 1px); } .isRootAtBottom > .arrow { - bottom: 100%; + bottom: calc(100% - 1px); } .isRootAtLeft > .arrow { - left: 100%; + left: calc(100% - 1px); } .isRootAtRight > .arrow { - right: 100%; + right: calc(100% - 1px); } // Side alignments: top diff --git a/src/components/Popover/_theme.scss b/src/components/Popover/_theme.scss index bb3523cb..696f5306 100644 --- a/src/components/Popover/_theme.scss +++ b/src/components/Popover/_theme.scss @@ -11,6 +11,7 @@ $color: var(--rui-Popover__color); $background-color: var(--rui-Popover__background-color); $box-shadow: var(--rui-Popover__box-shadow); -$arrow-width: 1rem; +// 1 rem (16px) + 2px (for insetting the arrow) +$arrow-width: 18px; $arrow-height: math.div($arrow-width, 2); // 1. $arrow-corner-offset: 0.75rem;