Remove CSS rules for responsive sizing
We have some rules in the CSS to hide items labelled as desktop-and-up
, tablet-and-up
, tablet-and-below
, etc. These are used to control responsive elements, however the hidden elements are still rendered. As part of !1313 (merged) I am introducing a window size listener on the App which can be passed to elements as a prop to allow us to make use of native v-if
conditional rendering.
The CSS rules have a lower impact when resizing the window, but a higher impact when loading elements as more needs to be loaded. Given that users are unlikely to be switching from desktop to mobile, using conditional rendering makes more sense.