4.29 - Popup title disappears

Question

Hey,

since updating to ArcGIS 4.29 (I came from version 4.27 before), I've noticed that the titles of my action buttons in the popups disappear if the image area falls narrower than a specific value.

So far we have been able to counteract the responsive behavior with the following global CSS:

.esri-view-width-less-than-large .esri-popup__action-text {
  display: flex !important;
}

This no longer works with the new update, which is a pity, the title even disappears if only the standard zoom action button is there, although there would definitely be enough space to render the title.

Question: How can I reactivate the titles? (My screen will never be “too narrow” for my use case)

Additional info:
- I use Angular version 17 with the NPM package @ArcGIS/core@4.29.10
- I usually work with popup templates in feature layers

Thanks

Justin_Greco · Answer

The display of the labels for the action buttons is set by the expanded attribute of the calcite-action-bar.  So one thing you could try is setting that attribute when the popup is displayed and when the map view is resized like this.

view.watch('popup.selectedFeature', () => expandActionBar());
view.on('resize', () => expandActionBar());
const expandActionBar = () => {
   let actionBar = document.querySelector('.esri-popup__main-container calcite-action-bar');
   if (actionBar) {
      actionBar.setAttribute("expanded", "");
   }
}

Justin_Greco · Answer

It looks like the popup adjusts the display of the actions based on the width of the map view, not the width of the popup.  What is the requirement to have the popup be 450px all the time rather than adjust based on the width of the app?

n1kl4s · Answer

Hey, sure! This is what the popup looks like when there is “enough space”, i.e. the screen width is above the calcite breakpoint (the goal is that it always looks like this):

This is what it looks like when the screen is “too narrow”:

In my eyes there is enough space, the chrome element inspection also shows that the popups are both 450px wide (as expected, you will see next).
Otherwise, the only other custom styling for the popups is the following:

.esri-view-width-less-than-large .esri-popup__action-text {
  display: flex !important;
}

.map {
  ::ng-deep {
    .esri-popup__main-container {
      width: 450px !important;
    }
  }
}

And I read in the changelog that the popups now use the calcite design, but I'm at a loss as to how to prevent the annoying disappearance of the ActionButton titles.