Collapsing the Vivaldi Tab Sidebar

tl;dr: In Vivaldi, middle clicking the separator between the tab sidebar and the web page will either collapse or expand the sidebar; when collapsed, it shows just the tab favicons, and the workspace selector icon.

If you want to know how I got to that point, read on.

I've been using Vivaldi the past nine months or so.

I'd used it once before, but had to abandon it due to issues I was having with sites and applications I use for work, but tried it again earlier this year, and found it (a) worked everywhere I needed it, (b) performed better than any other browser I'd used, and (c) had features I'd never seen in other browsers that were hugely useful. (The quick search feature and workspaces are amazing, if you've not tried them! And tab tiling has allowed me to compare information or fill out forms in far easier ways.)

I also love having tabs in a sidebar instead of at the top.

Vivaldi actually allows you to choose any side of the screen for displaying tabs, and displaying them on the left or right stacks them vertically in a sidebar.

When you get a dozen or more tabs open, the side-scrolling, top tab bar becomes quickly untenable, as the tabs shrink and the useful information contained in their titles disappears. Sure, I could perform better "tab hygiene", but sometimes when you're in the middle of a project, that's not an option. Having them listed vertically in a sidebar means they are a consistent size, and easy to locate.

There's one problem, though: they take up screen real estate.

Most of the time, I don't actually need to see them; I only need to see them if I'm trying to switch to a specific tab.

For a while, I used a solution that utilized an experimental feature of the Vivaldi browser: CSS modifications. This feature allows you to define a stylesheet that interacts with the browser chrome. Coupled with a tool that allows you to inspect the application's DOM itself, you can do a lot, and I found a mod that:

  • Auto-hides the tab bar so that only the favicons show
  • Expands it when you mouse over the tab bar

This was pretty magical.

However, I noticed that if the load on my machine were high, or there was a tab using a lot of resources, it could get pretty laggy. Additionally, it meant that any time my cursor moved over that area, it would expand — which might not be what I wanted if, for instance, I was just moving my cursor between windows on the screen.

But worse: it hid the workspaces feature, which I've started to use to, well, do better tab hygiene. Workspaces allow me to group related tabs, and then I can switch between workspaces within a window. This keeps resource usage lower, and helps me focus better.

But by hiding the tooling, I had to go through a lot of hoops to use it, and I found I was avoiding the feature.

So I recently started looking to see if Vivaldi had added any features to enable tab bar hiding natively, without a mod, and discovered that it's basically existed all along; it just requires a click.

Specifically, a middle-click, on the separator between the sidebar and the web page.

Middle clicking on this separator will either collapse or expand the sidebar; when collapsed, it shows just the tab favicons, and the workspace selector icon.

While I'd love to see a keyboard shortcut for this, or even a native auto-hide/expand feature, this is still an easy workflow to adopt, and has been more predictable in usage.