My goal is to reposition some calcite popovers when viewed on a small screen size like mobile view using CSS/JavaScript to give more screen real estate to a web map. Currently my calcite popovers have reference elements to calcite buttons and this works well for medium to large size screens. I'm trying to have the popovers "dock" to the bottom of the screen similar to what experience builder does when you are viewing on mobile. I have tried updating my CSS and changing the reference elements using JavaScript but this either does nothing or produces hacky unpredictable results.
The popovers appear to be anchored to the button elements, but I can't seem to find any computed styles to support this. Is there a relatively straightforward and not so hacky way to adjust the positioning of these popovers based on screen size? I'm even open to messing with the shadow dom if that's what it takes, but a simpler less hacky approach is obviously preferred. Thanks for your time and any suggestions!
