From e19d907f0f6e3bbaf3ddd3d7cb710d2a16c1489f Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 1 Jun 2020 16:31:53 +0200
Subject: [PATCH] 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)
---
 app/assets/stylesheets/common/base/d-popover.scss | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
index 98ec3b1d87a..1e625926ab6 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);
     }
   }