Incorrect number of note items and unused dead area in Note List panel

[ken1kob]

To increase the displayed information of Joplin, I reduced the height of note items in the Note List using the following userchrome.css.

.sidebar div.list-item-container {
    height: 20px !important;
}

.note-list .list-item-container,
.note-list .list-item-container div {
    height: 25px !important;
}

The result is as follows. The bottom area of the Note List is unused, and the number of the notes in the list is unchanged before and after the height is changed. For comparison, the Sidebar is properly rendered.

For reference, the before image is here.

Environment

Joplin version: 2.1.8
Platform: Windows
OS specifics: Windows 10 Pro (21H1)

Steps to reproduce

1. Run with the above userchrome.css.
2. Click 'All notes' in the Sidebar. If you have enough number of notes, you always observe this bug in the Note List panel.

Describe what you expected to happen

When the height of items in the Note List is reduced, the whole area should be used and the number of items should be increased as follows.

[laurent22]

The note list expects a fixed note height for performance reasons, so if it's changed via css it won't work.

[ken1kob]

@laurent22 , it is possible to configure the height of note list items using CSS without any performance degradation. If the performance is the only thing that matters, it is unnecessary to give up to fix the bug.

[laurent22]

Not using CSS, it can't be done because the list is already built by the time the CSS is applied. I don't have any solution to be honest, it's just the way it works. The list can handle thousands of notes but the drawback is indeed that it's not that flexible.

[ken1kob]

it can't be done because the list is already built by the time the CSS is applied.

It CAN. The height of a note list item specified by CSS can be acquired before the first time of the window of the desktop app is rendered. After that, no extra processes and overheads are needed.

[ken1kob]

@laurent22 , do you need a working example?

[ken1kob]

PR #5271 fixes this issue.

[ken1kob]

@laurent22 , in order to keep the issue tracking clean for the future, if the reason of the previous close were based on misunderstanding, it would be recommended that the close is reverted to the open state and that it will be closed after another decision

[hieuthi]

I am actually running into the same problem, current design uses a lot of spacing which is nice to look at but for small laptop i want to pack as much as information as i can.

Just to comment to say that i am glad to see that there is a potential fix for it.

[deciacco]

What about instead of CSS this be made an option under Settings -> Appearance??
Having this ability is very helpful for those that don't care for all the wasted space in "modern" UI.

[reaseno]

Just had the same problem. I am sad that the issue has been open for so long :(