Optimizing Favorites and Recents

I found indenting the page links under Favorites and Recents to be more pleasant for viewing as well as easier to spot visually in the sidebar.

The CSS for indenting is easy to add:

/* Favorites and Recent 
   Indent them and also compress the space between them. */

.nav-contents-container {
  padding-top: 0px !important;
.favorites .header,
.recent .header {
  padding-top: 0px !important;
  margin-top: 0px !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
.favorites .bd,
.recent .bd {
  margin-left: 25px;  


.favorite-item a,
.recent-item a {
  padding-top:    4px !important;
  padding-bottom: 0px !important;

/* Create button */
button#create-button {
  width: 30px !important; 

button#create-button .mx-1 {
  display: none !important;

You may also want to see my previous post Compressing icons in left sidebar to get back more space for consolidating feature buttons into one row.

Thanks for sharing this!
Indeed, it looks better.


I also want to show my appreciation for this customization. It indeed makes the items on the sidebar more pleasing to see and easier to parse. Thank you!

1 Like

Thank you, that makes it easier to see the items in the menu.

This styling code could be native, @TfTHacker have you tried proposing it via pull request on GitHub?

cc @moderators