[Popover]: Property verticalAlign: "Stretch" align incorrectly

[PlutaKatarzyna]

Bug Description

UI5 Popover / Responsive Popover component property verticalAlign with value "Stretch" does not align correctly with the trigger. Popover itself align to the top, but show arrow as it was align center.

Version 1.24 example

Version 2.0 example

Affected Component

ui5-popover ui5-responsive-popover

Expected Behaviour

• If trigger is bigger than popover itself, popover should align with top and bottom edges of the trigger.
• If trigger is smaller than popover itself, popover should either align to the top or center, but arrow pointer should point to the trigger

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5TYW1wbGU8L3RpdGxlPlxuPC9oZWFkPlxuXG48Ym9keSBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6IHZhcigtLXNhcEJhY2tncm91bmRDb2xvcilcIj5cbiAgICA8c3R5bGU-XG4gICAgICAgIGJvZHkge1xuICAgICAgICAgICAgaGVpZ2h0OiA5MDBweDtcbiAgICAgICAgfVxuXG4gICAgICAgIC5wb3BvdmVyLWNvbnRlbnQge1xuICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgICAgfVxuXG4gICAgICAgIC5wb3BvdmVyLWZvb3RlciB7XG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbiAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgICAgIHBhZGRpbmc6IDAuNXJlbSAwO1xuICAgICAgICB9XG4gICAgPC9zdHlsZT5cblxuICA8IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG5cbiAgPHA-MSA8L3A-PHA-MjwvcD48cD4zPC9wPjxwPjQ8L3A-PHA-NTwvcD5cbjx1aTUtYnV0dG9uIGlkPVwiYnRuXCI-T3BlbiBQb3BvdmVyIE9wZW4gUG9wb3ZlciBPcGVuIFBvcG92ZXI8L3VpNS1idXR0b24-XG5cbjx1aTUtcG9wb3ZlciBwbGFjZW1lbnQtdHlwZT1cIlJpZ2h0XCIgdmVydGljYWwtYWxpZ249XCJTdHJldGNoXCIgIG9wZW5lcj1cImJ0blwiIGhlYWRlci10ZXh0PVwiTmV3c2xldHRlciBzdWJzY3JpcHRpb25cIj5cbiBcbiAgICA8ZGl2IGNsYXNzPVwicG9wb3Zlci1jb250ZW50XCIgPlxuICAgICAgICA8dWk1LWxhYmVsIGZvcj1cImVtYWlsSW5wdXRcIiByZXF1aXJlZCBzaG93LWNvbG9uPkVtYWlsPC91aTUtbGFiZWw-XG4gICAgICAgIDx1aTUtaW5wdXQgaWQ9XCJlbWFpbElucHV0XCIgIHBsYWNlaG9sZGVyPVwiRW50ZXIgRW1haWxcIj48L3VpNS1pbnB1dD5cbiAgICAgICAgPHVpNS1sYWJlbD5Ob3RlOiBJZiB5b3Ugb3BlbiB0aGUgcGFnZSBpbiBtb2JpbGUsIGEgZGlhbG9nIHdvdWxkIGJlIGRpc3BsYXllZC48L3VpNS1sYWJlbD5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgc2xvdD1cImZvb3RlclwiIGNsYXNzPVwicG9wb3Zlci1mb290ZXJcIj5cbiAgICAgICAgPHVpNS1idXR0b24gaWQ9XCJjbG9zZVBvcG92ZXJCdXR0b25cIiBkZXNpZ249XCJFbXBoYXNpemVkXCI-U3Vic2NyaWJlPC91aTUtYnV0dG9uPlxuICAgIDwvZGl2PlxuXG48L3VpNS1wb3BvdmVyPlxuXG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQgLS0-XG4gICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwibWFpbi5qc1wiPjwvc2NyaXB0PlxuPC9ib2R5PlxuXG48L2h0bWw-XG48IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG4ifSwibWFpbi5qcyI6eyJuYW1lIjoibWFpbi5qcyIsImNvbnRlbnQiOiIvKiBwbGF5Z3JvdW5kLWhpZGUgKi9cbmltcG9ydCBcIi4vcGxheWdyb3VuZC1zdXBwb3J0LmpzXCI7XG4vKiBwbGF5Z3JvdW5kLWhpZGUtZW5kICovXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9Qb3BvdmVyLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9CdXR0b24uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0xhYmVsLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9JbnB1dC5qc1wiO1xuXG5jb25zdCBidG4gPSBbLi4uZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoXCJ1aTUtYnV0dG9uXCIpXVswXTtcbmNvbnN0IHBvcG92ZXIgPSBbLi4uZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoXCJ1aTUtcG9wb3ZlclwiKV1bMF07XG5cbmJ0bi5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgKCkgPT4ge1xuXHRwb3BvdmVyLm9wZW4gPSAhcG9wb3Zlci5vcGVuO1xufSk7In19

Steps to Reproduce

1. Create ui5-popover or ui5-responsive-popover element
2. Set following properties: placement-type="Right" vertical-align="Stretch"
3. Open popover

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

2.0.2 , 1.24.1

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Organization

SAP / UDEx components team

Declaration

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

[kgogov]

Hello @PlutaKatarzyna,

Thank you for sharing this finding. I am forwarding this ticket to the responsible team, who will look into it and assist.

@SAP/ui5-webcomponents-topic-rd, could you please look into this?

Regards, Konstantin Gogov UI5 Web Components GitHub Dispatcher