FIX: Correct the misalignment of popover arrows (#9947)

FIX: Correct the misalignment of popover arrows (#9947)

  • Fixes position of the top arrow, and border width of both
  • Merged top and transform properties
  • .5px values are required to make arrow border appear the same with as overall popover border width

I did have a chance to try it out on a Windows machine with a non-high DPI display and there were no issues. And I just re-tested it with Firefox on macOS using the “Open in Low Resolution” option and it looked more or less ok (bearing in mind that it the whole app is then a blurry mess, and that using custom zoom levels causes the arrow to break slightly, but that was also the case on Firefox before this change)

diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
index 98ec3b1..1e62592 100644
--- a/app/assets/stylesheets/common/base/d-popover.scss
+++ b/app/assets/stylesheets/common/base/d-popover.scss
@@ -80,15 +80,14 @@ $d-popover-border: $primary-medium;
 
   .d-popover-top-arrow {
     border-color: transparent transparent $d-popover-border;
-    top: 8px;
-    transform: translate(0, -15px);
+    top: -8px;
     border-width: 0 8px 8px;
 
     &:after {
       border-color: transparent transparent $d-popover-background;
       border-style: solid;
       border-width: 0 7px 7px;
-      bottom: -8px;
+      bottom: -8.5px;
       margin-left: -7px;
       position: absolute;
       content: "";
@@ -97,8 +96,7 @@ $d-popover-border: $primary-medium;
 
   .d-popover-bottom-arrow {
     border-color: $d-popover-border transparent transparent;
-    top: calc(100% + 16px);
-    transform: translate(0, -16px);
+    top: 100%;
     border-width: 8px 8px 0;
 
     &:after {
@@ -107,7 +105,7 @@ $d-popover-border: $primary-medium;
       border-color: $d-popover-background transparent transparent;
       border-style: solid;
       border-width: 7px 7px 0;
-      bottom: 2px;
+      bottom: 1.5px;
       transform: translate(-7px, 0);
     }
   }

GitHub sha: e19d907f