Increase Max Width of Vertical Tab Bar
-
Currently max width of vertical tab bar is hardcoded to 330px (as of Vivaldi 6.0). It is too narrow for people with wide monitors. Please increase max tab bar width. Even better, make it unlimited.
Workaround:
Relax the tab width limit by editingbundle.js
file.Warning: This method is for experienced users only! You can easily break your browser UI. Proceed with caution.
Important! Back up the original file before you make any changes.Tested with Vivaldi 6.x.
- Find
bundle.js
in Vivaldi installation directory.
It varies between operating systems. For example, on MacOS the location can be:
/Applications/Vivaldi.app/Contents/Frameworks/Vivaldi Framework.framework/Versions/<version>/Resources/vivaldi/bundle.js
Obviously, the version number will be different for each new version of the browser. - Close Vivaldi (ensure the process is not running) and open
bundle.js
file with your favourite text editor. - Search for 330 (enable "whole word" feature in your editor to reduce false positive results). Find places related to tab width and change them to a bigger number of your choice, say 930.
It is usually a few places that you need to edit. - Search for 360, as well. There will be a couple of places related to max tab width. Change it to a bigger number, say, 960.
- Save
bundle.js
and start Vivaldi
- Find
-
@tinsmith 260 px @ 100% seems sensible to me for a common size like a 1920x1080 monitor. What is your monitor's resolution?
-
@pesala My screen is 1980x1200. Max 260px is about 13% of the screen width! Compare it with the limit of the side panel, which is about 60% of the main window.
I find myself using 350-500px wide tabs pretty often. In other words about 20% of the screen width feels most comfortable for me. Not sure where the 260px limit comes from, it's not wide enough to show most of the captions.
-
Now you can use this:
#tabs-container.left, #tabs-container.right { width: 500px !important; } #tabs-container.left .tab-position, #tabs-container.right .tab-position { width: 500px !important; }
-
@potmeklecbohdan I've seen this hack before. Unfortunately it sets fixed tab bar width and therefore is not practical. After every update I edit bundle.js file to replace the 260px max to something like 650. This way the tab bar is still resizeable but with more sensible max limit. Ideally I'd like the max width limit to be percentage of the main window size, not a hardcoded number.
-
+1 for this.
Ultra Wide monitor, 2560×1080.That's how it looks like:
Vertical tab bar is wonderful. But I would like to use my screen space more efficiently, and to see more than a few words in the tab titles.
-
Just received the 2.7 update. The browser is getting better overall, which is good.
However, this silly limit of 260 pixels width for the vertical tab bar is still there.
Bumping up the topic. -
@potmeklecbohdan This code has the side-effect of increasing the Active Tab width to 500 pixels when Tabs are on the Top or Bottom.
Users could choose their own preferred value to use in the CSS, but the tab bar is no longer resizable or collapsible to an icon.
-
@Pesala I've just edited it—now it should only affect side tabs. I know it's not resizable, but it's 1:1 choice—either wider, or resizable.
-
As of version 3.1 the vertical tab width is still limited to 260 pixels. Many of us use 4K monitors these days. This limit on the tab panel width is quite annoying.
Bumping up the topic. -
I just upgraded my Monitor to ultrawide (3440*1440) and noticed the tab bar width limit.
Bumping up the topic.... -
+1 for this request.
I'm not a programmer so maybe there is a good reason but I've never understood why such arbitrary numbers are hard coded into so much software on how much one can stretch a side panel or similar. The Vivaldi side panel Window view can be expanded to take up more than half the screen, so how hard can it be to give us some more adjustment with side tabs?
Humorously, side tabs can be collapsed to nothing more than a small icon, which is a nice option to have, yet cannot be expanded much. On the other hand the side panel window can be made larger than one would ever need, but is limited in how much you can collapse it.
-
This just became essential with the introduction of two-level stacking.. The solution proposed by @potmeklecbohdan makes the tabs wide, but not the bar itself for me. Any update on this?
-
@simokron This should work with 3.6
#tabs-tabbar-container.left, #tabs-tabbar-container.right { width: 500px !important; } #tabs-subcontainer.left, #tabs-subcontainer.right { flex-basis: 250px !important; } #tabs-tabbar-container.left .tab-position, #tabs-tabbar-container.right .tab-position { width: 100%; }
-
+1 for the increase. The current tab-width-limit was alright, but needs to be increased for two-level stacking by at least 50%, better 200% as there is no need for a limit. Every user should be able to drag it to the optimal size.
I'm using a 34" monitor with 3440x1440 with my tabs to the right. Can't use two-level stacking right now without any hacks.Thanks a lot in advcance!
-
@potmeklecbohdan Tried that, but it broke the visuals of the subcontainer. I only see the icon now centered and the title of the website is gone.
-
@Thalon Disable the mod, resize both parts of the tab bar to show the title & then re-enable the mod.
-
@potmeklecbohdan I tried this, but I have the same problem as @Thalon
Strangely enough, it works with the pinned tabs though
-
@potmeklecbohdan It seems to be related to the relative widths. In particular, if I try
/* Increase width of tab bar */ #tabs-tabbar-container.left, #tabs-tabbar-container.right { width: 450px !important; } #tabs-subcontainer.left, #tabs-subcontainer.right { flex-basis: 225px !important; }
It looks OK until I hover over the selected tab in the subcontainer and the title disappear (but the favicon stays in the correct position). No idea what's going on here ^_^
I also can't see the preview window on the currently selected tab in the subcontainer
-
@simokron Ah, I see the problem (don’t know if I was blind before or if it was OK), but I’m not able to fix the root cause. It can be worked around by reverting everything wrt
.tab-small
&.tab-mini
, but I’m not gonna do that.