Outdoor comfort tab issue with bootstrap

[FedericoTartarini]

Hi, please copy the code from the natural ventilation tab which resizes the components as a function of the windows with. In the latest implementation of the filter the responsive design has not been implemented and when I resize the window the filter and the dropdown overlap. It should be an easy fix since you just need to use dash bootstrap components and copy the code from the natural ventilation tab.

The window should look something like this one:

[danielh7-cs9]

Hi @FedericoTartarini, I've fixed this. See below screenshots.

When resizing:

Before I submit my pull request I just wanted your thoughts on whether we should put the "Select scenario filter" in the first column Div (As I have done it my first screenshot above). Reason I ask is because I think it will create more consistency with other tabs, for example, Psychrometric tab filter and the the customization heatmap filter in the data explorer tab. e.g.

[FedericoTartarini]

Hi @danielh7-cs9 thank you so much for working on this but it would be ideal if the dropdown would have a size of 12, i.e. occupy all the space available when on small screen since at the moment it is not rendering well. What I mean is that the dropdown should be at the top and then in a new row there should be the filter. Also on small screens please remove the padding or the white margin since it is not needed and takes away space. The above change should be very simple to implement with dash bootstrap components, just pass something like md-12 or sm-12 to fix the issue.

Yes, you can put the Select scenario first.