fix(ui5-responsive-popover): fixed position of downward pointing arrow (#3508)

ResponsivePopover resets the custom property `_ui5_popup_content_padding`
as it is used by other components.
The calculation for the position of the arrow depended on the padding,
and the calculation will be wrong when the padding is set to "0".
Solved by changing the positioning of the arrow by using `top`.

Fixes #3500

Author: georgimkv

packages/main/src/themes/Popover.css

@@ -55,7 +55,7 @@
 :host([actual-placement-type="Top"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);
 	height: 0.5625rem;
-	bottom: calc(-1 * (var(--_ui5_popup_content_padding) + 2px));
+	top: 100%;
 }
 
 :host([actual-placement-type="Top"]) .ui5-popover-arrow:after {

packages/main/test/pages/ResponsivePopover.html

@@ -99,6 +99,11 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		Content
 	</ui5-responsive-popover>
 
+	<ui5-button id="btnRpTopWithArrow">RP on Top with downward pointing arrow</ui5-button>
+	<ui5-responsive-popover placement-type="Top" id="rpTopWithArrow">
+		<div>text</div>
+	</ui5-responsive-popover>
+
 	<script>
 		btnOpen.addEventListener("click", function(event) {
 			respPopover.openBy(btnOpen);
@@ -127,6 +132,10 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		btnSimpleRP.addEventListener("click", function(event) {
 			simpleRP.openBy(btnSimpleRP);
 		});
+
+		btnRpTopWithArrow.addEventListener("click", function(event) {
+			rpTopWithArrow.openBy(btnRpTopWithArrow);
+		});
 	</script>
 </body>
 </html>