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);
}
}