Directions component style change from 4.33 to 4.34?

[EricErtl]

I am using the Directions map component in a React application with the JS SDK.  In the 4.33 SDK version, the Directions component was responsive and, when placed in a calcite panel, extended with the width of the panel.  In 4.34, there seems to be a max width/min width that prevents responsiveness.  Is there a recommended approach to using this component in the 4.34 release?

    

[ReneRubalcava]

That's odd, directions doesn't have a max width. It has a min-width of 300px.

https://codepen.io/odoe/pen/MYyKEKY?editors=1000

Do you have a sample showing how the panel and component are working together? Is your calcite version up to date with what 4.34 is using (^3.3.2)?

[EricErtl]

Hi @ReneRubalcava, thanks for the response!  I created a pen showing a similar design that I am using.  It seems to be behaving the same way.  I set a max width to 500px to the shell panel.  

What is interesting is that when updating to the 4.34 version, the legend and basemap gallery components had the same issue but after setting width: 100% (w-full) to the component, it filled the parent calcite-panel as expected.

https://codepen.io/ericertl/pen/yyOOZXm

[ReneRubalcava]

Ok, we'll look into this one for 5.0. We had to try and cover various scenarios when slotted in ui and not. See what we can do here, thanks!