[Desktop Feature Request] Wrap long note titles in note list like it is done on Mobile Android

Features
1

Title pretty explanatory.

As you can see below the title is not wrapped, which makes long note titles very hard to access and manage.

image
image504Ă—488 17.1 KB

2 Likes
2

I have the problem too all the time cause my notes always have very long titles !
A tooltip [infobulle en français] on the note could be a first step solution in order to see all the title without changing the width of the note column.
@_vg : is it possible to put there a screen copy of what mobile users see exactly in this situation ? Thanks.

3

screenshot: Joplin web: Test folder with two notes. One is very long and wraps: Content: This is a long note title. It's long enough to wrap. On mobile (& web) a different system is used for managing scroll in the notes list. Unlike on mobile, the desktop scrolling system currently assumes that all items have the same height.
screenshot: Joplin web: Test folder with two notes. One is very long and wraps: Content: This is a long note title. It's long enough to wrap. On mobile (& web) a different system is used for managing scroll in the notes list. Unlike on mobile, the desktop scrolling system currently assumes that all items have the same height.503Ă—563 21.9 KB

2 Likes
4

If wrapping the note title in the note list is too difficult, I would be ok with it being wapped on the note pane instead.

Basically wrapping in either of those two places would be good enough for me:

image
image1316Ă—518 114 KB

5

We have to wait in order to see if devs can do that... (wrapping the note title or a tooltip with the title).

6

Another possible partial solution came to mind, for which I assume the dev effort would be little: show the full note name in a tooltip when hovering a note in the note list.

7

Here is a trick you might find helpful in the meantime: install the Note tabs plugin. Then you can see the full note title in a tooltip when you hover over its tab.

2 Likes
8

Have also been waiting for this feature for quite some time. Since all my attempts to solve it with CSS hacks have failed, I opened a Github issue quite some time ago:

For me, this is currently probably the most important outstanding feature for this truly great note-taking app. I work a lot with notes that essentially consist of a single sentence, which is inserted directly into the title. Wrapped note list display works great in the mobile client, but is still missing in the desktop client.

@personalizedrefriger Since this has been requested repeatedly by numerous users… would it be possible to implement this in the near future? Would be awesome :slight_smile:

1 Like
9

While I agree that wrapped note titles should be built-in on desktop as with mobile and web, this CSS hack works with the latest stable release:

.note-list-item-wrapper {
  height: fit-content !important;
}

.note-list-item {
  height: fit-content !important;
  padding: 8px 0;
}

.note-list-item > .content > .title {
  white-space: pre-wrap !important;
  height: fit-content;
}

The first padding value informs note list item height. Change it as desired.

The only drawback of the above is that the active note list item indicator is only as tall as the item title, not the item itself.

10

Thanks for the hack. After switching the note list style to “Compact” (using the “View” menu), it seemed to work.

However after trying out several longer note lists with wrapped note titles, it became apparent that the long-standing problems also occur with this CSS hack in many of the note lists:

  • When scrolling to the bottom of the list, it often jumps back to the top
  • The last list entries are sometimes not displayed (empty area at the bottom of the list)
  • The top list entries constantly flicker in some lists

As also mentioned in Notebook and Notes Title Text wrap it's unfortunately very unlikely that reliable note list wrapping can be achieved by CSS only.

2 Likes
11

You're welcome.

Using All notes and search over notebooks and scrolling mitigates those issues.

Since the following userchrome.css notebook list item CSS presents lesser, but similar issues to my above CSS:

.list-item-wrapper {
  height: fit-content !important;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 8px;
}

.list-item-wrapper > .list-item > .title {
  white-space: pre-wrap;
}

I think @tomasz86's suggestion in Sidebar "no wrap" option and tooltip for notebook and notes titles to tweak list JS for accommodating wrapping applies to both lists, whereas the following difference between how lists load items doesn't apply here:

As far as title wrapping for the Note List (Preview) plugin goes, this simple userchrome.css CSS works if you are OK with body copy getting cut off. Even so, a wider note list can prevent cut-off copy altogether.

.note-list-item > .content > .title {
  white-space: pre-wrap !important;
}

Overall, it does seem odd that unwrapped titles have been an issue since 2018 with how similar note titles can be. For example: Title Text Wrap in Note List

Joplin Web also having wrapped titles makes me wonder what the holdup is for desktop.

13

Yes: