How to Make Toolbar Float at the Top of Expanded Entries for Bigger Screens

When using Selfoss on my desktop computer, I found myself narrowing down the browser width so the responsive design would kick in the smaller screen view, which floats the toolbar at the top. But I came up with something better by adding some CSS to my user.css file. With this CSS, the expanded entry fills the whole entry window, also like the tablet/phone view. auto_collapse=1 in your config file is probably a good idea. There is actually 2 somewhat distinct toolbars in Selfoss, one for desktop/notebook and one for tablet/phone. This shows the desktop/notebook toolbar.

This will only work for the in development ver. 2.19.

If you do not have a user.css file, create one in your Selfoss root folder and add this:

/*
Toolbar at top of expanded entry in desktop width
*/
/* desktop and tablet */
@media screen and (min-width: 641px) {
body{
height: 100%;
overflow-x: hidden;
}
 
.entry.selected.expanded.entry {
padding-top: 30px;
}

.entry.selected.expanded .entry-toolbar {
    position: fixed;
    top: 0;
    font-size: .8em;
    margin: 0;
    padding: 0;
    height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.entry.selected.expanded {
    position: fixed;
    top: 0;
    border: 0;
    height: 100%;
    overflow: auto;
    background: #fff;
    z-index: 200;    
}

.entry-content {
    overflow: hidden;
    overflow-wrap: break-word;
    padding-bottom: 60px;
}

.entry.selected.expanded .entry-toolbar {
position: fixed;
top: 0;
margin: 0;
}

/*  shows close button */
.entry.selected.expanded .entry-close {
    display: inline;
    }
}