fix(ui5-popover): correct position of the arrow when the Popover is below the target

In case when the target is button with small width the arrow should be centered to the button.

Fixes #7152

Author: LidiyaGeorgieva

packages/main/src/Popover.ts

@@ -668,6 +668,11 @@ class Popover extends Popup {
 			safeRangeForArrowX,
 		);
 
+		if (isVertical) {
+			// if the target is with small width - only icon button for example
+			const arrowTranslateXMinimum = -(popoverSize.width / 2 - (targetRect.width / 2 + targetRect.left) + ARROW_SIZE);
+			arrowTranslateX = (arrowTranslateX < arrowTranslateXMinimum) ? arrowTranslateX : arrowTranslateXMinimum;
+		}
 		return {
 			x: Math.round(arrowTranslateX),
 			y: Math.round(arrowTranslateY),

packages/main/src/themes/Popover.css

@@ -20,7 +20,7 @@
 :host([actual-placement-type="Bottom"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);
 	top: -0.5rem;
-	height: 0.5625rem;
+	height: 0.5rem;
 }
 
 :host([actual-placement-type="Bottom"]) .ui5-popover-arrow:after {
@@ -74,7 +74,7 @@
 .ui5-popover-arrow {
 	pointer-events: none;
 	display: block;
-	width: 1rem;
+	width: calc(1rem + 2px);
 	height: 1rem;
 	position: absolute;
 	overflow: hidden;

packages/main/test/pages/Popover.html

@@ -343,6 +343,10 @@
 	<br>
 	<br>
 
+	<div class="popover12auto-left">
+		<ui5-button id="btnOpenDynamicLeft" icon="overflow"></ui5-button>
+	</div>
+
 	<div class="popover12auto">
 		<ui5-button id="btnOpenDynamic" icon="overflow"></ui5-button>
 	</div>
@@ -558,6 +562,20 @@ <h2>Horizontal Align</h2>
 			popNoFocusableContent.showAt(event.target);
 		});
 
+		btnOpenDynamicLeft.addEventListener("click", function () {
+			var popoverLeft = document.createElement("ui5-popover"),
+				buttonLeft = document.createElement("ui5-button");
+
+			buttonLeft.textContent = "Focusable element";
+			popoverLeft.appendChild(buttonLeft);
+			popoverLeft.setAttribute("id", "dynamic-popover-left");
+			popoverLeft.setAttribute("placement-type", "Bottom");
+
+			document.body.appendChild(popoverLeft);
+
+			popoverLeft.showAt(btnOpenDynamicLeft);
+		});
+
 		btnOpenDynamic.addEventListener("click", function () {
 			var popover = document.createElement("ui5-popover"),
 				button = document.createElement("ui5-button");