You must hide the complete div, not only its content.
This is the css to remove the items which you want to remove from the left bar and to let other elements fill up the free space:
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="personal"] {
display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="recent"] {
display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="favorites"] {
display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="sharingout"] {
display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="deletedshares"] {
display: none;
}
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="pendingshares"] {
display: none;
}
… and this is the CSS to remove the items from the three dots/context menu:
li.action.files-list__row-action-favorite {
display: none;
}
li.action.files-list__row-action-view {
display: none;
}
li.action.files-list__row-action-edit-locally {
display: none;
}
… or group everything together like this for better readability:
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="personal"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="recent"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="favorites"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="sharingout"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="deletedshares"],
li.app-navigation-entry-wrapper[data-cy-files-navigation-item^="pendingshares"],
li.action.files-list__row-action-favorite,
li.action.files-list__row-action-view,
li.action.files-list__row-action-edit-locally {
display: none;
}
By now, you should have recognized the pattern, you will be able to make any element disappear like that.
Just don’t give up too quickly and “think like the browser”
Much and good luck,
ernolf