OverlayPanel target arrow points to the wrong position when target is on the right edge of the screen

[dakotajd]

FIXED IN: #9442

---

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

StackBlitz Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewed in detail and assisted.

https://stackblitz.com/edit/primeng-overlaypanel-demo-tqua3z?file=src/styles.css

Current behavior
The OverlayPanel component's arrow points to the wrong place if the target is up against the edge of the right side of the screen. There is code to handle this in the align() method:

primeng/src/app/components/overlaypanel/overlaypanel.ts

Lines 187 to 199 in a8551d4

	align() {
	if (this.autoZIndex) {
	this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
	}
	DomHandler.absolutePosition(this.container, this.target);
	if (DomHandler.getOffset(this.container).top < DomHandler.getOffset(this.target).top) {
	DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
	}
	if (Math.floor(DomHandler.getOffset(this.container).left) < Math.floor(DomHandler.getOffset(this.target).left) &&
	DomHandler.getOffset(this.container).left > 0) {
	DomHandler.addClass(this.container, 'p-overlaypanel-shifted');
	}
	}

but the CSS class: p-overlaypanel-shifted does not exist in https://github.com/primefaces/primeng/blob/master/src/app/components/overlaypanel/overlaypanel.css

The CSS looks to have (unintentionally?) been removed during the migration to PrimeOne (the switch from .ui- to .p- prefixes for class names) in this commit here: c7dd064#diff-4166dfa8da6660ec4e195e891b761a9ce8f5e49db19ace3613ac9d66ad8e4f94L56

Expected behavior
The arrow should be shifted to the other side of the panel to point to the target if it is against the right edge of the screen.

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/primeng-overlaypanel-demo-tqua3z?file=src/styles.css

What is the motivation / use case for changing the behavior?
I want the arrow to point to the right place 🙂

Please tell us about your environment: Windows, Webstorm/Visual Studio Code/Intellij, Node, WebSphere

• Angular version: ^10.0.0

• PrimeNG version: ^10.0.0

• Browser: All

• Language: All

• Node (for AoT issues): node --version = N/A

[thsoliveira]

I'm having the same problem with the overlaypanel when its called in the right edge of the screen the arrow shows out of the panel box. I don't know if its an issue of my project or if its a primeng thing because of the arrow position calculation its seems weird. This only happens when the overlaypanel its called on the right side of the screen, if I change the position of the element who calls the overlaypanel everything works just fine.

Duplicate of #