Regarding the new "New Note" button design

[Sinacs]

@niker

I use both Notebook and Note lists in one column on the left, this change hit me hard and shifted the notes down by one, eating precious screen real estate and making that part of the screen extremely cluttered (2 lines of controls right under the synchronize button).

I have the same feeling as you, but it has improved a little since v2.10.12, the breakpoint is triggered when the note list panel width is less than 324px, and I think it's better than before. But for me, I think below 300px will be better.

@niker

That said I still think the Sort notes button is useless, the option is in the menu.
I would propose to al teast try and give useless things like the Sort Notes and All Notes buttons and Tag list a clear HTML ID since the classes are randomly named and it's difficult to target them via user CSS without breaking on every update.

At this point, here's a suggestion:

/* add the below into your userchrome.css */

.search-bar ~ div {
  display: none;
}

It will work without a problem if the updates do not add any elements between the search bar and those buttons. So, it's way better than using the random class if you want to hide it by custom css.

[dpoulton]

@niker

That said I still think the Sort notes button is useless, the option is in the menu.

If you do not want the sort button you can turn it off in the settings.

[Sinacs]

Oh! I missed this setting!

[Steph]

An option inside the joplin's settings would be great in order to be able to choose between the previous UI and the new one. I feel very inconfortable with the new one (I only use JOPLIN on computers). I really need to have a separate line for the search zone (like before) and not a "magic circus" zone !

[MrMacvos]

To have the 'New note', 'New to-do', 'Search' and 'Sort' divs always display nicely in a block, I added this CSS:

/* Search, new note, etc. */
.sc-jfTVlA
{
	flex-direction: column !important;
	height: 82px !important;
}

I tried many other CSS-paths to target this div, but it doesn't have its own class or ID. So I had to use this generated class. To find out what class it is in your instance of Joplin, toggle Development Tools (HELP-menu) and look for this div (see image):

Result, regardless the column width:

[dpoulton]

@MrMacvos

tried many other CSS-paths to target this div, but it doesn't have its own class or ID.

Looking at your image, the div you want to change has a parent of div, which has a parent of div, which has a parent of div with its own class, namely, rli-noteList.

If you want to avoid a generated class try:

div.rli-noteList > div > div > div {
    flex-direction: column !important;
    height: 82px !important;
    }

Basically > means has a parent of, reading right to left.

or is the parent of reading left to right with the last one mentioned being the one you want to change

CSS Selectors Reference

[MrMacvos]

thanks! That's better. I had forgotten the >.

[Sinacs]

You can also write like below:

.rli-noteList div[style^="flex-direction:"]:first-of-type {
  flex-direction: column !important;
  height: 82px !important;
}

The selector means:

1. Find an element which contains the class .rli-noteList.
2. Then, find the child div element which contains the style attribute and start typing with flex-direction:.
3. Then, Only the first element which matches the #2 condition.

That can be avoided most of the problems that are caused by Joplin UI changing, even Joplin add any element between the .rli-noteList and your target element. It would be the less maintain solution.

[MrMacvos]

Ok, this is also a possibility .. relying on styles or the number of div's remains an uncertainty. I now use this one.

[MrMacvos]

This targets all div's inside the last div. I saw in @Sinacs post the :first-of-type selector and when I added that to the divs, so: div.rli-noteList > div:first-of-type > div:first-of-type > div:first-of-type it worked. But then .... the note list's height is calculated on loading and not changed, so with this CSS the note list moves down and the last note remains hidden, unless you search for it. So I added this CSS to the note list, and now it works as I wanted it to, with both above mentioned tips:

div.item-list.note-list
{
	height: calc(100% - 82px) !important;
}