Minimize the use of JS for layout in the VAudioTrack component

[Olga Bulat]

Problem

We use the props on the VAudioTrack to conditionally change the layout based on 1. the JS-set properties such as isFilterVisible or the parent page and 2. the screen breakpoint. To improve the performance, as well as to simplify the JS code, it is better to move the handling of the second point to CSS, as much as possible.

Description

To simplify the VAudioTrack's row layout, use CSS grid and arrange the elements differently depending on the breakpoint. This will allow us only to have the m and l sizes (the s layout is the same for both, and used for xs and sm and maybe md breakpoints)

Additional context

Normally, the CSS grid causes the source order not to match the document order. This means that when you use keyboard to navigate, the focus order becomes different than what you expect. An example of the old mobile header: pressing the Tab key, you go to the search input on the second row, and then to the menu buttons in the first row. This can be very confusing for the user.
With the VAudioTrack, we don't have to worry about the tabbing order because we handle and change the tab order in the code anyways.

Implementation

• 🙋 I would be interested in implementing this feature.