The style in userchrome.css stopped working as it should

[seneqa]

Operating system

Windows

Joplin version

3.2.1

What issue do you have?

Hello! I used the code in userchrome.css to:

• editor and viewer swapped
• viewer was bigger than editor

Code:
'''
.rli-editor > div > div > div > div > div > div > div:nth-child(1) {
flex: 1 0 0% !important;
}
.rli-editor > div > div > div > div > div > div > div:nth-child(2) {
flex: 2.2 1 0% !important;
border-left: none !important;
}
.editor-toolbar {
max-width: 100% !important;
}
.rli-editor > div > div > div > div > div > div {
flex-direction: row-reverse !important;
}
'''

But after the update it doesn't work. What should I fix in the code to make it work?

[seneqa]

Okay, I figured it out myself. Maybe it will be useful to someone:

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(1) {
flex: 1 0 0% !important;
}

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) {
flex: 2.2 1 0% !important;
border-left: none !important;
}

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div > div:nth-child(2) > div > div:nth-child(2) {
    flex-direction: row-reverse !important;
}

[personalizedrefriger]

I'm linking to a related pull request that should make the editor/viewer easier to style:

Chore: Desktop: Migrate from style= to SCSS for visible note pane styling