Feature request: Auto-hide sidebar for narrow windows

[mattaw]

I often have side-by-side browser windows or browser + another program. On my screen the sidebar takes up too much room when the window is tall and narrow when placing two windows side-by-side and I end up hiding it, and then having to unhide it afterwards.

Truly this is not the largest problem, but I would love a setting where I can give a width in pixels (or rem I guess?!) below which the sidebar would be hidden when the window resized, and above which it would be visible.

Thanks for an amazing extension!

[mbnuqw]

Unfortunately, this is not possible with the current WebExtension API - addon cannot change width of the sidebar and cannot hide/show sidebar without explicit user click. You can only use userChrome.css hack to make this work.

[AnonJohn]

I've been looking for this too, and took the moment to work out a userChrome.css hack.

This combines the dynamic native tabs snippet with some logic so that sidebery is not shown if the window width is less than 1024 pixels. Note that it uses the corresponding dynamic native tabs preface value (unicode blank here). I welcome more elegant takes, but it seems to work! In wider windows it also lets you close sidebery if you want the native tabs. This approach could be combined with autohide approaches too. I didn't like that as much, but you could auto-hide only in narrow windows.

@media screen and (min-width: 1024px) {
#main-window #TabsToolbar {
height: 41px !important; /* was 29 to start /
overflow: hidden;
transition: height .3s .3s !important;
}
#main-window[titlepreface="⠀"] #TabsToolbar {
height: 0 !important;
}
#main-window[titlepreface*="⠀"] #tabbrowser-tabs {
z-index: 0 !important;
}
}

@media screen and (max-width: 1024px) {
#sidebar-box{ display: none; }
#sidebar-header { display:none; }
#sidebar-splitter {display: none}
#sidebar-panel {display:none}
#sidebar {display: none}
}