Title Text Wrap in Note List

Features
1

I tend to have longer note titles for some of the notes that I take and noticed that in the note list on Joplin Desktop on Windows, the titles get cut off if they are over about 45 characters (at least with the current display settings I have - not sure if this is resolution dependent). Right now, I have several notes that have very similar text in the part of the title that shows, but no way to see the rest of the title to determine which note might be the one I need.

Capture
Capture.PNG677Ă—562 45.8 KB

However, the notes list in Joplin Android wraps longer titles to allow all the text to be visible.

Would it be possible to have Joplin Desktop wrap the titles on the notes list? Or have a way to grab the edge of the list and expand it to see what isn’t shown? Or even adding a the ability to scroll sideways? I’d prefer wrap, but any option to address seeing all the note title without having to select the note just to see which one it was.

As a separate idea, I personally quite like the “card” aesthetic that Google and Evernote have used (among many other apps). Perhaps something along those lines might work, wrapping the title text and including note meta data - creation date, modified data, tags, location, etc. The trade off for would be fewer notes visible in the list at any one time. To me, that’s an acceptable trade off for having more information readily visible for each note. But I understand if that might not be the what would be best for most.

Just me thinking / brainstorming.

1 Like
2

This could also be bug in the Electron version. I’m not sure.

@laurent, is this is a bug or should this be a feature request?

3

I tried fixing it for myself since I couldn't ignore it while using. Maybe it helps:

/* note sidebar */

.item-list.note-list > div {
    min-height: 34px;
    height: auto !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

.item-list.note-list > div:empty {
    padding: 0px !important;
    min-height: auto;
}

.item-list.note-list > div > a{
    white-space: break-spaces !important;
    padding-left: 7px !important ;
}



/* notebook sidebar */

.list-item-container {
    height: auto !important;
    min-height: 30px;
}

.folders.expanded > div > a {
    white-space: break-spaces;
}

span.title {
    line-height: unset !important;
}
2 Likes