Bug 1903196

Summary: Popover positioning is misaligned for Overview Dashboard status items
Product: OpenShift Container Platform Reporter: Steve Goodwin <sgoodwin>
Component: Management ConsoleAssignee: Yadan Pei <yapei>
Status: CLOSED ERRATA QA Contact: Yadan Pei <yapei>
Severity: low Docs Contact:
Priority: medium    
Version: 4.7CC: aos-bugs, jokerman
Target Milestone: ---   
Target Release: 4.7.0   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: If docs needed, set a value
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2021-02-24 15:37:08 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Embargoed:
Attachments:
Description Flags
Control plane popover misalignment
none
Control Plane status popover displayed on top
none
Operator status popover displayed on top none

Description Steve Goodwin 2020-12-01 15:45:39 UTC 
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.
Comment 1 Steve Goodwin 2020-12-01 16:39:46 UTC 
Created attachment 1735307 [details]
Control plane popover misalignment
Comment 2 Steve Goodwin 2020-12-01 21:12:07 UTC 
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."
Comment 4 Yadan Pei 2020-12-09 10:32:54 UTC 
Created attachment 1737870 [details]
Control Plane status popover displayed on top
Comment 5 Yadan Pei 2020-12-09 10:37:44 UTC 
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
Comment 8 errata-xmlrpc 2021-02-24 15:37:08 UTC 
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