The current placement of the Title Field above the Toolbar significantly limits the space available to display the full note title. When a title exceeds the narrow horizontal area, it becomes truncated, making it difficult to read or identify the note at a glance.
Because the title is the primary identifier of a note, not being able to view it in full often forces users to copy the title into the note body just to read it - especially when the first line of the note body does not match the actual title. This creates unnecessary friction and makes note identification more cumbersome than it needs to be.
Being able to see the complete title is essential for quickly and accurately identifying a note.
Move the Title Field below the Toolbar instead of above it.
Optionally, apply a distinct background color (e.g. light grey as the Toolbar) or subtle styling to the Title Field to visually separate it from the note body.
Positioning the Title Field below the Toolbar frees up additional horizontal space, allowing long titles to be displayed in full rather than truncated.
Truncated titles require extra actions to reveal the full text. Placing the Title Field below the Toolbar avoids this and makes identifying notes easier.
Positioning the title below the Toolbar and above the Note Body also creates a more intuitive structure and reduces visual fragmentation, improving readability and coherence.
I agree that it would be nice to do something with how title is displayed, as currently (especially when screen space is limited), any title that is a bit longer than a few words gets cut and it's impossible to see it in full without scrolling.
What I've been doing personally is to simply add the very same title in an H1 element at the very top of each note, so that I can at least see the full thing when I open the note. This does the job, but it's inefficient, as any changes to the title need to be done twice .
I do that as well. It helps when exporting notes and importing them into other apps that support markdown.
Some apps have the option of taking the first header as the name of the note. Very helpful because note titles that have characters prohibited for filenames would have incorrect titles if importing using the filename as the note title.
I agree when having all these other items on the same bar as the title (seems to be worse when using the Rich text editor?) the space for the title field is limited, and it would make sense to put it on its own line.
As a workaround though, if you want to view or edit a longer note title, you could double click the note to open it in a new Window, so there is a much larger width available, when maximised. It also looks like the full title is shown with line wrapping in the notes sidebar, if you just want to see it.
Indeed, when the note is opened in a new window, the Title Field is maximised, making it possible to read the full title. However, this is an inconvenient way to read note titles, especially if you want to quickly glance through a lot of them.
If one also wants to edit the title, seeing the title in the Note List Sidebar does not entirely solve the problem.
The most straightforward solution is to replicate the title in the note body to make it fully visible. However, if we change the title in one place, we then have to copy the change to the other place to keep them consistent.
Nevertheless, I think it would be better to solve this problem in a different way…
Alternative Proposal: move Note Info Bar & Toolbar below the Title Field
Purpose
Enhance both the readability and editability of note titles by expanding the visible area of the Title Field, allowing users to view and modify long titles at a glance.
How
Move the Note Info Bar and the Toolbar so they appear below the Title Field, giving the title the full horizontal space of the editor.
To be honest I think the original proposal is better than the alternate one. Does not need a different colour background though, just a divider at the bottom of the title input, just like the mobile app
If you’re willing to “waste” space by having the title always be full width, knocking the toolbar stuff down to the next line, you can add the following to userChrome.css:
input.title-input {
field-sizing: content;
/* Override the default "width: 100%" style */
width: max-content !important;
}
/* Scroll everything in the note title bar */
.note-title-wrapper {
overflow-x: auto;
}
/* Overlay the note title input with the note action buttons */
.note-title-info-group {
position: sticky;
right: 0;
background-color: var(--joplin-background-color);
}
Edited: Added width: max-content !important to input.title-input. Without this, part of the title input is covered by .note-title-info-group even when scrolled to the end.
@RJCA Bear in mind the last posted css is for horizontal scroll rather than vertical scroll, which is existing, but the css just adds a scrollbar. You’ll need to restart Joplin after adding the css to userchrome.css.
@personalizedrefriger When using your css, if the the title is not scrolled to the end, then typing across the boundary where it overflows will type underneath the controls on the right of the title bar. Ideally this should be combined with the css to move the title on separate line, in order to avoid this
What i was actually aiming for is in fact an Horizontal Scrollbar for the Title Field when the title is too long - in the same way as i have for the Toolbar (see image). However, when i add that piece of code i there is no visible change - it’s exactly the same as before:
It looks like you are also using the css to move the title field to a separate row. If you combined both css snippets together and there is no visible change regarding the scrollbar, its probably because there is a conflict and they need to be combined in a way that the changes are compatible together
.
.
