The elements we’re messing with are a .workspace-leaf-content which has two children .view-header and .view-content. This main element is a flex element, so using float doesn’t really do anything there. You could start messing with changing the ordering and direction of the flex, but I’m not sure how to do that properly.
However, I discovered that using position: absolute seems to be a fairly straight forward and hopefully reliable solution. So toss the following into a CSS snippet and enable it:
.workspace-leaf-content:has(.no-view-header) {
& .view-header {
position: absolute;
top: 5px;
right: 20px;
width: 50px;
/* background-color: blue !important; /* */
& div {
display: none;
}
}
& .view-header:hover {
position: inherit;
top: inherit;
right: inherit;
width: 100%;
background-color: inherit !important;
& div {
display: inherit
}
}
& .no-view-header {
padding-top: 0px;
}
}
And to use it, add no-view-header to the file in question. Now it’s defaulting to hide the entire header, and you need to hover over a box which is around 20x50 pixels large in the upper right corner. If you want to see the box remove the /* in front of the first background-color. (And I reckon one could work a little bit more to potentially create a nicer box/area potentially with some text/icon/…, but it do work with not showing anything)
When you hover over that box, it’ll display the entire header as usual, and the header will work as usual until you leave the header-box at which point it’ll hide again.
To claim even a little more space, I removed the padding at the top of .view-content box which is the point where the .no-view-header is actually inserted.
Hope this works according to your expectation, as I’m more of a CSS hacker than anything else… 