Background
From usability testing, we found that the discoverability of the search bar was an issue. People scrolled past it and then didn't realize that there was a search. We want to make it sticky to increase the discoverability but also the ease of use, especially for templates with a lot of parameters.
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning
Requirements
- For single templates only, make the parameter search and hide/show button sticky in the sidebar, so that as users scroll through the parameter list they remain visible at the top.
- Background for sticky elements should be Base100 (#fff)
Nice to haves
If this somehow becomes an easy add on, then include this. Otherwise, it would be a follow-up ticket.
- Also implement for multi-part, but when scrolling and another template appears, then it pushes the previously sticky header out of the way and replaces it. In these cases, the template name should also remain sticky. Open question: if we do this in the future, but hide template names now, will it be possible to show them for this use case?
Mocks
Desktop | Mobile |