I really just want to do it in Web Appbuilder.
First off I did some more digging and I have found that this behavior is a result of the esri javascript api and not limited to AGOL or web appbuilder.
So I found that there could be two ways around this but not sure how to do either of them in WAB.
1. Use an anchor for the popup like:
Popup | API Reference | ArcGIS API for JavaScript
anchor: 'bottom-right'
as part of :
var popup = new Popup({
fillSymbol: fill,
titleInBody: false,
anchor: 'bottom-right'
}, domConstruct.create("div"));
The main problem with this is that the popup no longer becomes intelegent to what side of the point to place the popup so it dose not appear off screen. The good side is that the popup box adjusts from the bottom not the center anymore.
2. Use the resize(width, height) method like:
Popup | API Reference | ArcGIS API for JavaScript
popup.resize(300,200);
as part of:
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));
popup.resize(300,200);
I like the second option because it still acts smart and does not move the arrows if the size changes. The only down side is if the potential empty space for small popup boxes.
Any ideas how to implement either of theses two options or maybe third that I have not come up with?
fyi i tested the above code on this esri sample. Popup | ArcGIS API for JavaScript