Collecting feedback on the New to-do and New note redesign

[julien-me]

The redesign of the buttons to create new notes and new todos opened some discussions regarding its current implementation and possible improvements.

Below are the comments that were made.

1) The new design could be more responsive.
Right now the buttons expand and shrink with the width of the note list but when the list is below a certain width the buttons overflow.

It was suggested to make the buttons responsive so that the text displayed shortens instead of overflowing. For instance "New" could be removed below a certain width and if the width shrinks further instead of text we could show the icons of the previous design.

2) Combine the two lines when the note list is wide enough
Vertical space is precious on small screens and for this reason when the note list is wide enough we could put the search bar and the buttons on one line. It's especially prevalent with a vertical layout.

1/4 => New note
1/4 => New to do
2/4 => Search bar (+filter button)

3) Bug: Do not hide buttons when the focus in on Search
Buttons don't need to disappear anymore when a user clicks on the search bar. This was originally done so that the search bar could expand.

4) Bug: The two lines don't align when the sort buttons are disabled.

[laurent22]

@julien-me, for this please create a separate pull request for each item

[uiop-on]

Vertical space is at a premium so suggest keeping the three items (search, sort, new) on one line as far as possible. I only ever use 'New note' so 'New to-do' could easily be removed for me (or maybe a toggle option in settings). Then the button text can be a much shorter and simpler "New".

[tomasz1986]

The current iteration still has the problem of unusable space when using the note-list-at-the-top layout:

The highlighted area is unusable. This can be easily reproduced as long as your note list is long enough. The same issue was already fixed previously, however it has now come back due to the newly implemented responsive layout which moves all four elements to a single line which also changes the height.

[laurent22]

Added here: #7848 (comment)