[Responsive Popover]: Arrow styles issue for small trigger and vertical-align="Top"

[PlutaKatarzyna]

Bug Description

When responsive popover has small trigger (like text or icon) and it uses vertical-align="Top", styles of arrow are slightly incorrect - top edge of arrow does not connect with top border:

Affected Component

ui5-responsive-popover

Expected Behaviour

No response

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpXCI-XG4gICAgPHN0eWxlPlxuICAgICAgICBib2R5IHtcbiAgICAgICAgICAgIGhlaWdodDogMzAwcHg7XG4gICAgICAgIH1cblxuICAgICAgICAucG9wb3Zlci1jb250ZW50IHtcbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICAgIH1cblxuICAgICAgICAucG9wb3Zlci1mb290ZXIge1xuICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgICAgICBwYWRkaW5nOiAwLjVyZW0gMDtcbiAgICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuXG4gICAgPGJyLz5cbiAgICA8YnIvPlxuICAgIDx1aTUtaWNvbiBpZD1cImJ0blwiIG5hbWU9XCJob21lXCIgbW9kZT1cIkludGVyYWN0aXZlXCI-PC91aTUtaWNvbj5cblxuICAgIDx1aTUtcmVzcG9uc2l2ZS1wb3BvdmVyIG9wZW5lcj1cImJ0blwiIGhlYWRlci10ZXh0PVwiTmV3c2xldHRlciBzdWJzY3JpcHRpb25cIiBwbGFjZW1lbnQ9XCJFbmRcIiB2ZXJ0aWNhbC1hbGlnbj1cIlRvcFwiPlxuIFxuICAgICAgICA8ZGl2IGNsYXNzPVwicG9wb3Zlci1jb250ZW50XCI-XG4gICAgICAgICAgICA8dWk1LWxhYmVsIGZvcj1cImVtYWlsSW5wdXRcIiByZXF1aXJlZCBzaG93LWNvbG9uPkVtYWlsPC91aTUtbGFiZWw-XG4gICAgICAgICAgICA8dWk1LWlucHV0IGlkPVwiZW1haWxJbnB1dFwiIHN0eWxlPVwibWluLXdpZHRoOiAxNTBweDtcIiBwbGFjZWhvbGRlcj1cIkVudGVyIEVtYWlsXCI-PC91aTUtaW5wdXQ-XG4gICAgICAgICAgICA8dWk1LWxhYmVsPk5vdGU6IElmIHlvdSBvcGVuIHRoZSBwYWdlIGluIG1vYmlsZSwgYSBkaWFsb2cgd291bGQgYmUgZGlzcGxheWVkLjwvdWk1LWxhYmVsPlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IHNsb3Q9XCJmb290ZXJcIiBjbGFzcz1cInBvcG92ZXItZm9vdGVyXCI-XG4gICAgICAgICAgICA8dWk1LWJ1dHRvbiBpZD1cImNsb3NlUG9wb3ZlckJ1dHRvblwiIGRlc2lnbj1cIkVtcGhhc2l6ZWRcIj5TdWJzY3JpYmU8L3VpNS1idXR0b24-XG4gICAgICAgIDwvZGl2PlxuXG4gICAgPC91aTUtcmVzcG9uc2l2ZS1wb3BvdmVyPlxuXG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQgLS0-XG4gICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwibWFpbi5qc1wiPjwvc2NyaXB0PlxuPC9ib2R5PlxuXG48L2h0bWw-XG48IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG4ifSwibWFpbi50c3giOnsibmFtZSI6Im1haW4udHN4IiwiY29udGVudCI6Ii8qIHBsYXlncm91bmQtaGlkZSAqL1xuaW1wb3J0IFwiLi9wbGF5Z3JvdW5kLXN1cHBvcnQuanNcIjtcbi8qIHBsYXlncm91bmQtaGlkZS1lbmQgKi9cbmltcG9ydCBVSTVFbGVtZW50IGZyb20gXCJAdWk1L3dlYmNvbXBvbmVudHMtYmFzZS9kaXN0L1VJNUVsZW1lbnQuanNcIjtcbmltcG9ydCBqc3hSZW5kZXJlciBmcm9tIFwiQHVpNS93ZWJjb21wb25lbnRzLWJhc2UvZGlzdC9yZW5kZXJlci9Kc3hSZW5kZXJlci5qc1wiO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tIFwiQHVpNS93ZWJjb21wb25lbnRzLWJhc2UvZGlzdC9kZWNvcmF0b3JzLmpzXCI7XG5cbkBjdXN0b21FbGVtZW50KHtcbiAgdGFnOiBcIm15LWVsZW1lbnRcIixcbiAgcmVuZGVyZXI6IGpzeFJlbmRlcmVyLFxufSlcbmV4cG9ydCBjbGFzcyBNeUVsZW1lbnQgZXh0ZW5kcyBVSTVFbGVtZW50IHtcbiAgQHByb3BlcnR5KClcbiAgbmFtZT86IHN0cmluZztcblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXY-XG4gICAgICAgICAgSGVsbG8sIHt0aGlzLm5hbWUgfHwgXCJXb3JsZFwifSFcbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxuXG4gIHN0YXRpYyBzdHlsZXMgPSBgZGl2IHtcbiAgICAgIHBhZGRpbmc6IDFyZW07XG4gICAgICBjb2xvcjogIzMzNGVmZjtcbiAgfWA7XG59XG5cbk15RWxlbWVudC5kZWZpbmUoKTtcbiJ9LCJtYWluLmpzIjp7Im5hbWUiOiJtYWluLmpzIiwiY29udGVudCI6Ii8qIHBsYXlncm91bmQtaGlkZSAqL1xuaW1wb3J0IFwiLi9wbGF5Z3JvdW5kLXN1cHBvcnQuanNcIjtcbi8qIHBsYXlncm91bmQtaGlkZS1lbmQgKi9cbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1Jlc3BvbnNpdmVQb3BvdmVyLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9CdXR0b24uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0xhYmVsLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9JbnB1dC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvSWNvbi5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvaG9tZS5qc1wiO1xuXG5jb25zdCBidG4gPSBbLi4uZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoXCJ1aTUtaWNvblwiKV1bMF07XG5jb25zdCByZXNwUG9wb3ZlciA9IFsuLi5kb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZShcInVpNS1yZXNwb25zaXZlLXBvcG92ZXJcIildWzBdO1xuXG5idG4uYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsICgpID0-IHtcblx0cmVzcFBvcG92ZXIub3BlbiA9ICFyZXNwUG9wb3Zlci5vcGVuO1xufSk7In19

Steps to Reproduce

No response

Log Output, Stack Trace or Screenshots

No response

Priority

Low

UI5 Web Components Version

2.6.3 , 1.24.15

Browser

Chrome

Operating System

No response

Additional Context

UDEx ticket reported https://github.tools.sap/sapudex/digital-design-system/issues/1387

Organization

SAP UDEx Components and Tokens

Declaration

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

[kskondov]

Hello @SAP/ui5-webcomponents-topic-rd can you please take a look of this issue where the arrow of the popover is misaligned