[board] Size classes (small, medium, large) do not update if you use display:none on one size

[Peppe]

Background

Resizing a vaadin-board-row (by for example changing browser size) will add a class size to the row depending on the size of the road. It is eather "small", "medium" or "large". You can apply css to these to make them look different depending on if you are using a phone or desktop, for example

.myrow.small{
  background-color: magenta;
}

Problem

However, the switching of the style name will break down if you use the css display:none. If you have once applied it, you will never get out of it again because the board doesn't notice that the row has more space now. I would guess that it measures available space and display:none makes it always say that it has 0px width available.

Testcase

.headers.small {
  display: none;
}

<vaadin-board-row class="headers">
  <h3>Project</h3>
  <h3>Progress</h3>
</vaadin-board-row>

Workaround

Use visibility and height to make it look like it isn't rendered in the DOM, while it really is:

.headers.small {
  visibility: hidden;
  height: 0;
}