Increase Max Width of Vertical Tab Bar
-
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. -
@potmeklecbohdan Could you elaborate? I'm not so familiar with Vivaldi's CSS. Do you have a MWE with this workaround? Thanks!
-
@simokron There’s nothing like a MWE. Either it’s complete, or it isn’t. Doing it cleanly means at least a day of work… finding all selectors for
.tab-small
or.tab-mini
incommon.css
, checking what they change, writing a new style that changes it back — & takes care of the tabs position.Otoh, maybe it could be solved with something simple — just getting rid of these two classes…
-
@potmeklecbohdan I see, thanks! I'll see if I can find the time to fiddle with it a bit over the weekend. If you think of something clever or can point me somewhere I can find out how do remove the classes, please let me know.
-
@simokron Hmm, I’ve just found a way — & I’m not looking for any other.
The primary tab bar must be narrower than
230px
, or even better194px
-
@potmeklecbohdan Hmm, that doesn't sound right. Isn't the default maximum 260 px? i.e., it will be narrower than that even?
Also, when I try, e.g., 194 * 2 = 388 as the total width and 194 for
flex-basis
, I still get the thing where when I hover over the selected tab in the submenu, the text disappears.Edit: But it does actually work with 380 and 190. So for now I guess I'll just use that. Thanks again!
-
@simokron The narrower than was exclusive, i.e. 230 or 194 is still too wide.
The reason for this is this:
- the tab bar can be only 260 px wide (normally)
- the
.tab
s get.tab-small
when they’re 66 px or narrower &.tab-mini
when 30 px or less - that width is computed with the expectation that the tab bar can be at most 260 px, so the secondary tab bar ‘definitely has to’ be what stays when you remove the width of the primary bar
Now that I’m thinking of it, it probably considers the configured width (what you’ve drag-resized it to) instead of 260 px → that might be another reason why you get other results.
-
@potmeklecbohdan Thanks for the excellent explanation and the tip! I'll give that a shot!
Edit: I can confirm that it indeed considers the adjusted setting. I already had it maxed out (386 px total and 193 px
flex-basis
is the way to go for me), but if I made the original bar much narrower, it indeed disappeared with much lower values than these. -
Here is the way to increase tab width limit that I personally use.
Warning: This method is for experienced users only! You can easily break your browser UI! Proceed on your own risk!
Note: Tested with Vivaldi 4.0.
Instead of editing CSS files I edit
bundle.js
file. Here are the steps:- 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/4.0.2312.24/Resources/vivaldi/bundle.js
Obviously, the version number will be different for each new version of the browser. - Important! Back up the original file before you make any changes.
- Close Vivaldi (ensure the process is not running) and open
bundle.js
file with your favourite text editor.
Note: With every minor release (e.g., 3.5 -> 3.6) the contents ofbundle.js
changes significantly. It takes a combination of intuition and experience to edit the right place. That's why making backups ofbundle.js
is essential. - Search for
362
(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, say962
. - It is usually few places that you need to edit.
As of Vivaldi 4.0 I had to edit the following places (snippets):Math.min(Math.round(e-n.left),362)
Math.min(Math.round(n.right-e),362)
return Object(K.a)(e,t,362)
r.maxWidth=360
<-- Note the 360 width
- Save
bundle.js
and start Vivaldi
In practice it is not as cumbersome as it may look from the description. It takes me a couple of minutes at most to edit
bundle.js
after every browser update. However, it is very annoying. This362
constant is clearly somewhere in the source code as a single variable and it should be very easy to update it to a bigger number. - Find
-
@Tinsmith Thanks for the detailed description! If I feel a strong urge for a width above 386 px, I'll make sure to give it a try!