[Popover]: Incorrect placement calculation inside CSS @container

[PlutaKatarzyna]

Bug Description

When element uses CSS @container feature with container-type: inline-size; , and it contains tooltip / ui5-popover, popover placement is incorrect.

Affected Component

ui5-popover

Expected Behaviour

Correct calculation of popover placement when using CSS container-type: inline-size; feature.

Isolated Example

https://sap.github.io/ui5-webcomponents/v1/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cblxuXG5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgPC9zdHlsZT5cbiAgICA8bGluayByZWw9XCJzdHlsZXNoZWV0XCIgaHJlZj1cIm1haW4uY3NzXCI-XG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-Q29udGFpbmVyIFF1ZXJ5IFBvcG92ZXIgQnVnPC90aXRsZT5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpXCI-ICAgXG4gICAgPGRpdiBjbGFzcz1cImRlbW8tc2VjdGlvblwiPlxuICAgICAgICA8aDM-UG9wb3Zlcmluc2lkZSBlbGVtZW50cyB3aXRoIGBjb250YWluZXItdHlwZTogaW5saW5lLXNpemVgLCA8L2gzPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29udGFpbmVyLXF1ZXJ5LXdyYXBwZXJcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAgICA8dWk1LWJ1dHRvbiBpZD1cImJ0bjJcIj5PcGVuIENvbnRhaW5lciBRdWVyeSBQb3BvdmVyPC91aTUtYnV0dG9uPlxuICAgICAgICAgICAgPC9kaXY-XG4gICAgICAgICAgICBcbiAgICAgICAgICAgIDx1aTUtcG9wb3ZlciBpZD1cInJlc3BQb3BvdmVyMlwiIG9wZW5lcj1cImJ0bjJcIiBoZWFkZXItdGV4dD1cIkNvbnRhaW5lciBRdWVyeSBQb3BvdmVyXCIgaG9yaXpvbnRhbEFsaWduPVwiQ2VudGVyXCI-XG4gICAgICAgICAgICAgICBUaGlzIHRvb2x0aXAgaGFzIGluY29ycmVjdCBwb3NpdGlvbmluZyBkdWUgdG8gY29udGFpbmVyIHF1ZXJ5LkNvbW1lbnRzIG91dCBjb250YWluZXIgcXVlcnkgaW4gbWFpbi5jc3MgdG8gc2VlIHRoZSBkaWZmZXJlbmNlXG4gICAgICAgICAgICA8L3VpNS1wb3BvdmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuIFxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPiJ9LCJtYWluLmpzIjp7Im5hbWUiOiJtYWluLmpzIiwiY29udGVudCI6Ii8qIHBsYXlncm91bmQtaGlkZSAqL1xuaW1wb3J0IFwiLi9wbGF5Z3JvdW5kLXN1cHBvcnQuanNcIjtcbi8qIHBsYXlncm91bmQtaGlkZS1lbmQgKi9cbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L1BvcG92ZXIuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0J1dHRvbi5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvTGFiZWwuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0lucHV0LmpzXCI7XG5cblxuY29uc3QgYnRuMiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiYnRuMlwiKTtcbmNvbnN0IHJlc3BQb3BvdmVyMiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwicmVzcFBvcG92ZXIyXCIpO1xuYnRuMi5hZGRFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgKCkgPT4ge1xuICAgIHJlc3BQb3BvdmVyMi5vcGVuID0gIXJlc3BQb3BvdmVyMi5vcGVuO1xuICAgIFxuICAgIGlmIChyZXNwUG9wb3ZlcjIub3Blbikge1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0-IHtcbiAgICAgICAgICAgIGNvbnNvbGUubG9nKFwiQ29udGFpbmVyIFF1ZXJ5IFBvcG92ZXIgUG9zaXRpb246XCIsIHtcbiAgICAgICAgICAgICAgICB0b3A6IHJlc3BQb3BvdmVyMi5zdHlsZS50b3AsXG4gICAgICAgICAgICAgICAgbGVmdDogcmVzcFBvcG92ZXIyLnN0eWxlLmxlZnRcbiAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgXG4gICAgICAgICAgICBjb25zdCBidXR0b25SZWN0ID0gYnRuMi5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICAgICAgICAgIGNvbnNvbGUubG9nKFwiQ29udGFpbmVyIFF1ZXJ5IEJ1dHRvbiBQb3NpdGlvbjpcIiwge1xuICAgICAgICAgICAgICAgIHRvcDogYnV0dG9uUmVjdC50b3AsXG4gICAgICAgICAgICAgICAgbGVmdDogYnV0dG9uUmVjdC5sZWZ0LFxuICAgICAgICAgICAgICAgIGJvdHRvbTogYnV0dG9uUmVjdC5ib3R0b20sXG4gICAgICAgICAgICAgICAgcmlnaHQ6IGJ1dHRvblJlY3QucmlnaHRcbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9LCAxMDApO1xuICAgIH1cbn0pO1xuXG5kb2N1bWVudC5nZXRFbGVtZW50QnlJZChcImNsb3NlUG9wb3ZlckJ1dHRvbjJcIikuYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsICgpID0-IHtcbiAgICByZXNwUG9wb3ZlcjIub3BlbiA9IGZhbHNlO1xufSk7XG4ifSwibWFpbi5jc3MiOnsibmFtZSI6Im1haW4uY3NzIiwiY29udGVudCI6IiAgIFxuLmRlbW8tc2VjdGlvbiB7XG4gICAgbWFyZ2luLWJvdHRvbTogMnJlbTtcbiAgICBwYWRkaW5nOiA0ZW07XG4gICAgYm9yZGVyLXJhZGl1czogMC41cmVtO1xufVxuXG4uY29udGFpbmVyLXF1ZXJ5LXdyYXBwZXIge1xuICAgIGNvbnRhaW5lci10eXBlOiBpbmxpbmUtc2l6ZTtcbiAgICBjb250YWluZXItbmFtZTogZGVtby1jb250YWluZXI7XG59XG5cbkBjb250YWluZXIgZGVtby1jb250YWluZXIgKG1heC13aWR0aDogNDAwcHgpIHtcbiAgICAuY2VudGVyIHtcbiAgICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgICAgIGJvcmRlcjogMnB4IHNvbGlkIGdyZWVuO1xuICAgIH1cbn1cbiAgICJ9fQ

Steps to Reproduce

• Create a wrapper component with CSS @container that uses container-type: inline-size
• Place a ui5-popover component inside this container
• Click the tooltip trigger

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

1.24.20

Browser

Chrome

Operating System

No response

Additional Context

Please read issue details reported for UDEx components: https://github.tools.sap/sapudex/digital-design-system/issues/1888

Organization

SAP UDEx Components & Tokens

Declaration

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