[popover]: arrow is not centered when close to the border/with large text

[rvsia]

Bug Description

The arrow of popover is not centered to the middle of target when it's close to the border of the screen or when there is a larger content

1) close to the border

2) large content

As we use only a small target for the popover, it looks really bad in our product

Affected Component

popover

Expected Behaviour

Popover arrow is centered to the

Isolated Example

https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-popover--docs

Steps to Reproduce

1. open webcompoments react popover page
2. modify content of the popover using inspect

Log Output, Stack Trace or Screenshots

see above

Priority

Medium

UI5 Web Components Version

^1.13.2

Browser

Edge

Operating System

MacOS

Additional Context

No response

Organization

SAP Signavio

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[elenastoyanovaa]

Hello @SAP/ui5-webcomponents-topic-rd ,

When the opener target is small and the popover does not have enough space the calculation of the arrow result in a unpleasant visualisation.

Steps to reproduce:

• Open the playground sample of the popover
• Change the button text to something small
• Change the placement type of the popover to bottom

Can you check?

Kind Regards, Elena

[georgimkv]

Reproducible sample: https://codesandbox.io/s/ui5-webcomponents-forked-zsq4hr?file=/index.html