Increase Max Width of Vertical Tab Bar
-
@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!
-
@simokron Thanks! I like this method because it doesn't set the width of the tab bar, but increases the limit instead. The tab bar itself remains resizable.
-
@Tinsmith That is definitely a nice bonus!
-
@simokron said in Increase Max Width of Vertical Tab Bar:
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?
Exactly this. How is it possible that a browser that supports two vertical tab bars side by side also limits them to a 100 px each? In a world with 4K monitors? Absurd.
-
@Tinsmith Just tried that, works like a charm! (Until the next update...)
-
@Tinsmith: Tried your
bundle.js
hack and it did unlock the tab bar, but the change is only for the entire bar (i.e. the main tab stack is still limited to 260px). This is going to work fine for me, since I decided to just widen the bar a bit and make the first tab bar collapse to favicons when inside a stack, but it is very silly.You can't see anything when the default bar is split in two. I guess they are pushing people to a top tab bar, but the left side makes way more sense with (ultra)wide monitors when you want to see more of the tab names. oh well
-
@dfleisch , I agree with you. This method is far from ideal. I rarely use two-level stacking, so it is somewhat tolerable trade off for me.
I don't know if Vivaldi moderators read it, but the proper solution here is to stop reverse engineering
bundle.js
. Instead, relax the limit!Maybe many years ago, when Vivaldi just started, the 1024x768 resolution was mainstream and 260px looked kind of OK. But now this limit is just too narrow for modern screens.
BTW, this limit is applied in other places. For example, "Any command" window (Ctrl+E). It is fixed width window of 260px, which often too narrow to see entire title of historic pages, so it is impossible to pick the right page.
-
@Tinsmith with introduction of subtabs bar look for 230 px also. Because after opening that subtabs bar they have wide width but main tab bar have fixed with = 230 px.
@OperaDevs - And even after fixing that fixed 230 px I was disappointed with that subtabs bar behavior. It's opening "eats" main tab bar space not page, so you need to have very wide main tab bar to have readable subtabs bar width. -
-
@potmeklecbohdan My mistake. VivaldiDevs
-
+1, this would be a really good feature. Current width limit is far too small, only reason I can think of for this limit is to avoid issues when the window is resized to have a smaller width than the tab bar.
On my machine, the minimum width for the browser window is about 500~550px. However, when I activate something from the side panel (bookmarks, downloads, etc) the browser seems to resize the tab bar just fine.
-
@Vivaldi please remove the size limit. If i want to make it 90% of my window size, i should be able to do so. This limitation is one of the biggest downsides since i started using Vivaldi right after the first release.
-
Just adding my voice to ask for this too. Setting any pixel limit on this (to me anyway) makes absolutely no sense.
Why can't it just be allowed to open quite literally to the entire width of the browser window if people wish to?
Admittedly yes that wouldn't be of much use to anyone as then how do you see the browser page however if it had no physical hard stop limit set to 260 or whatever then people with large monitors / resolutions would be able to drag it out to whatever width they like and all the browser has to do is remember what width they dragged to.
If the user doesn't want it too large then it's totally up to them to just set it to whatever width they want surely? If the browser remembers where they've set it then this surely doesn't put anyone out at all and caters for all users?Please do put me correct if this would cause issues for any users as I have honestly wracked my brains and can't think of any reason why it would?
Thank you in advance for considering this.Best wishes,
Mark