Web panels stacking vertically instead of horizontally + inconsistent sizing

Hi devs. I’m having some issues placing two or more web panels together side-by-side. The location I specified in my descriptor file is atl.page.metadata.banner. The elements themselves are about 175px wide but the iframe always renders at 300px which pushes the panels away from the edit page buttons on the right (see screenshot 1).

I’ve tried running AP.resize('100%') but didn’t have any luck. Only way I’ve found for the panels to sit flush with the buttons (no white space) is to hardcode in the width in my .hbs file but this isn’t really an option as the panel is meant to be reactive and when the size of the panel changes then the issue comes back again (see screenshot 2).

Is there a way to:

  1. Make the panels align horizontally
  2. Have them be placed next to the buttons without any white space