Changing Positioning of Calcite Popover Based on Screen Size - Calcite 3.3

[JasonBartling1]

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!

[DitwanDPrice]

Hey Jason, could you perhaps post a small CodePen example of a possible solution you attempted to get a better understanding of what you're trying to achieve and what's failed?

[JasonBartling1]

Here is a codpen with some of the stuff I've tried:  https://codepen.io/windowslover/pen/LENLQEO?editors=1111 .

[DitwanDPrice]

Unfortunately there isn't really a straightforward way to achieve the desired behavior for now.

For the future, a potential alternative to have that docked look would be to use a non-modal `sheet`, we have an issue for this here.

If there's flexibility with the structure perhaps using a shell-panel positioned at the bottom with display float could work. (Basic example)

[JasonBartling1 · Accepted solution]

Thanks for your input.  I think I'm going to try using a calcite-accordion that gets displayed once the screen size becomes small enough.