Tag bar CSS tweak no longer working

[_Ben]

Operating system

Windows

Joplin version

3.3.3

Desktop version info

Joplin 3.3.3 (prod, win32)

Sync Version: 3
Profile Version: 47
Keychain Supported: Yes
Alternative instance ID: -

Revision: 23254e6

Backup: 1.4.2
Email Note: 1.2.2
Freehand Drawing: 2.15.0
Note list (Preview): 1.1.0
Rich Markdown: 0.15.1
Text Colorize: 1.2.5
YesYouKan: 1.0.11

Sync target

File system

Editor

Rich Text Editor

What issue do you have?

I've been using this CSS tweak kindly provided by @muzak to move the tag bar to the top of the editor:

.tag-bar {
order: 1 !important;
}

.rli-editor > div > div > div div:not(.tag-bar) {
order: 2 !important;
}

(see How to change editor layout? - #6 by superphily)

This was working fine until I upgraded to 3.3.3 (I was previously using 3.23) and now the tag bar is back at the bottom of the screen. I haven't changed anything else, such as the CSS code.

Is there a way to get this working again on 3.3.3?

Many thanks
Ben

[_Ben]

I've just tested 3.3.2 and the CSS doesn't work there either. I'll try to test more earlier versions to see how far back this problem goes and when it began.

(I wonder also if the forum link above could be re-opened to see if anyone who contributed there has any ideas? It's a shame that one can't go back and continue often valuable conversations).

[personalizedrefriger]

It should be possible to do this by styling .editor-status-bar (which now contains the .tag-bar) and .note-title-wrapper.

Accessibility note: That these approaches only change where the tag bar is visually — it's still after the note editor in the focus order.

Moving the tag bar above the titlebar

.editor-status-bar { /* Tags + the focus mode indicator */
  order: -1; /* Move the tag bar before everything else in its parent */
}

Moving the tag bar just below the titlebar

.note-title-wrapper {
  order: -2;
}

.editor-status-bar {
  order: -1;
}

[_Ben]

Awesome Henry - that works brilliantly! Thank you so much for your help.

[Steph]

Great Job !