Description of problem: Popover arrows that are positioned to the right are not vertically aligned with dashboard status items. Additional info: The pf-c-popover receives an inline positioning calculation that recalculates correctly once page scrolled. These popovers look to have loading content upon initial display that causes the container height to increase, which possibly is the reason the initial pf-c-popover position calculation is incorrect. Expected results: Popover container arrow should be positioned next to the status item.
Created attachment 1735307 [details] Control plane popover misalignment
Related info: The Popover component uses Popper.js "positioning engine" for positioning. Per https://popper.js.org/docs/v2/modifiers/event-listeners/ "The eventListeners modifier adds scroll and resize listeners that update the position of the popper when necessary. These are not exhaustive and don't cover the following cases: When the reference element moves or changes size. When the popper element changes size (i.e. content). Manually updating the instance via instance.update(), a ResizeObserver or requestAnimationFrame loop (if animating) can solve these if necessary."
Created attachment 1737870 [details] Control Plane status popover displayed on top
Created attachment 1737871 [details] Operator status popover displayed on top Overview Status popover is displayed on top and arrows are vertically aligned Verified on 4.7.0-0.nightly-2020-12-08-141245
Since the problem described in this bug report should be resolved in a recent advisory, it has been closed with a resolution of ERRATA. For information on the advisory (Moderate: OpenShift Container Platform 4.7.0 security, bug fix, and enhancement update), and where to find the updated files, follow the link below. If the solution does not work for you, open a new bug report. https://access.redhat.com/errata/RHSA-2020:5633