Fix dropdow arrows changing depending on users font stack

With *45bd9c6 merged an improved was introduced but it still didn't
fix the alignment for all cases. Example if an integrator uses a
different font stack or the user doesn't have the 1st and the 2nd
default font it would fall back to something else. These differences
in font would change how the dropdown is aligned due to line-height.

On top of that, we were not accounting for the transparent border when
aligning. Set margin-top to 4px so to offset the existent transparent
border: 4px.

*45bd9c6:
- Vertical align dropdown arrows
- 45bd9c6009

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Ie695fa3a4a3a7edf3ec2f15ba2565bb2079d16fa

browser/css/jsdialogs.css

@@ -1271,6 +1271,7 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	border-top: 5px solid var(--color-main-text);
 	display: inline-block !important;
 	margin-left: 3px;
+	margin-top: 4px;
 }
 
 .unoarrow:not([disabled]):hover, .menubutton .arrow:not([disabled]):hover {
@@ -1280,8 +1281,9 @@ input[type='number']:hover::-webkit-outer-spin-button {
 .arrowbackground {
 	box-sizing: border-box;
 	width: 16px;
-	height: 16px;
-	display: inline-block;
+	height: 24px;
+	display: flex;
+	align-items: center;
 	border-left: 1px solid transparent;
 	background-color: transparent;
 	grid-column: 3;