Option to Modify the Tab Width

seeley

I've been searching in this forum (and the web) for a while and noticed a couple unsuccessful posts asking this question. Is there any way to make all top/bottom (not side) tabs wider- both active and inactive tabs? I think the tabs are not wide enough and it truncates much of the tab text.

Is there anything located in the default common.css that can accomplish this? I've looked in this file and tried some alterations with no success.

Is this something that's hardwired into the Chromium engine and cannot be changed? Thanks so much.

luetage

@seeley Has nothing to do with chromium, the UI is Vivaldi's code. You can change the tab width with CSS, but there are so many issues arising from this that it isn't usable.

Pesala

Thread moved to feature requests forum, and topic title made less specific to suit those who would like to reduce the width of tabs.

At 100% UI Zoom the default tab width in Vivaldi is 180 pixels.
In Opera 12.18, I have my tab width set to 145 pixels.

seeley

@luetage said in Option to Modify the Tab Width:

@seeley Has nothing to do with chromium, the UI is Vivaldi's code. You can change the tab width with CSS, but there are so many issues arising from this that it isn't usable.

Yes. The closest I got was making the active tab wider, but the inactive/background tabs were unaffected. So the active tab would overlap the background tabs and the New Tab button would be overlapped or hidden as well. Thx.

@pesala said in Option to Modify the Tab Width:

At 100% UI Zoom the default tab width in Vivaldi is 180 pixels.
In Opera 12.18, I have my tab width set to 145 pixels.

Thanks. How did you change the tab width in Opera? I'm wondering if that method would offer any hints.

Pesala

@seeley There is a section in the Toolbar.ini file, which is in my \profile\toolbar\ folder.

[Pagebar.style]
Button style=1
Large Images=1
Wrapping=0
Maximum Button Width=120
Grow To Fit=0
Mini Buttons=0
Mini Edit=0

seeley

@pesala I tried. Didn't see any similarities. Thanks anyway.

Pesala

The Active Tab Minimum Width can now be set with a slider to anything between 30 and 180 pixels, but the Tab Width is still fixed at 180 pixels.

This feature request is not implemented, one can only adjust the tab width if the tabs are placed on the side, where the width can be increased to about 260 pixels.

The slider for Active Tab Minimum Width would have to be changed to 30 to maximum if this feature was implemented.

stardepp

@Pesala said in Option to Modify the Tab Width:

my \profile\toolbar\ folder.

There is no such folder in my profile:

C:\Users\stgru\AppData\Local\Vivaldi\User Data\Default

2020-01-09 08_22_23-.jpg

Where exactly can I find this "toolbar.ini ?

eduardomaio

I know this is an old thread, but it was always popping up when I was searching for a way to do this. I found some code in https://www.reddit.com/r/vivaldibrowser/comments/6tqj3e/full_width_tabs/dloug9g/?utm_source=reddit&utm_medium=web2x&context=3 and I modified to this:

#tabs-container.top .tab-strip {
	display: flex !important;
	overflow-x: hidden !important;
	-webkit-app-region: no-drag !important;
}

#tabs-container.top .tab-strip span {
	flex: 0 1 220px !important;
	display: flex !important;
}

#tabs-container.top .tab-position {
	flex: 0 1 220px !important;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	height: 30px !important;
	--PositionX: inherit !important;
	--Width: inherit !important;
	max-width: 220px;
}

#tabs-container.top .tab-position .tab .favicon,
#tabs-container.top .tab-position .tab .close {
	flex: 0 0 18px !important;
}

#tabs-container.top .tab-position .tab .title {
	flex: 1 0 calc(100% - 55px) !important;
}

#tabs-container.top .newtab {
    position: relative !important;
    left: auto !important;
    top: auto !important;
}

You will lose the thumbnails on the tab bar (still available on hover), but they will have a width of 220px, which is more comfortable to use and read page titles than the 180px max by default.

Follow the instructions on https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1 on how to apply this custom css to Vivaldi.

Edit: Updated because it was broken with two-level stacks. Only tested with one level as I don't keep that many tabs open at the same time.

bluelion9

@eduardomaio Thank you.. This is an excellent solution! There is however a small but nagging issue. When the number of tabs is more than 6 (based on screen size), the new tab "+" icon starts to disappear and goes behind the minimize "-" icon due to overflow-x being hidden. If overflow-x is not hidden, the minimize "-" icon starts to vanish behind the "+" icon as the number of tabs increases. Neither of these options is useful. Is it possible to fix this?

vongalin

@eduardomaio Thank you as well. I have searched this forum for the bare minimum CSS (no JS wanted) to achieve this and your code works great. Easy enough to apply and tweak as needed (which I didn't have to).

Maybe the V team can add this option under Tabs.

eduardomaio

@bluelion9 said in Option to Modify the Tab Width:

@eduardomaio Thank you.. This is an excellent solution! There is however a small but nagging issue. When the number of tabs is more than 6 (based on screen size), the new tab "+" icon starts to disappear and goes behind the minimize "-" icon due to overflow-x being hidden. If overflow-x is not hidden, the minimize "-" icon starts to vanish behind the "+" icon as the number of tabs increases. Neither of these options is useful. Is it possible to fix this?

I don't think so, only with overflow-x: scroll really. Maybe add to #tabs-container.top .tab-strip a max-width: calc(100vw - 100px);

Buglocker

@seeley This mod is a part of VivaldiHooks.

seeley

@buglocker

Cool. Thank you for making aware of this.

reverendremiel

I would very much like to have minimum tab width like in Firefox, for all tabs, not just the active tab.

I also want tab scrolling. This means not to change tabs by scrolling, but scrolling the list of tabs while staying on/viewing the same tab, if that makes sense.

It's quite unbelievable that the Mozilla folks are the only ones who have managed to implement tab management that actually works, as well as a minimum tab width so that you can actually see at least some of the text on the tab to help identify it.

mib2berlin

@reverendremiel
Hi, search in the feature request forum section, please.
Both of your requests are already posted years ago, iirc tab scrolling got a lot of votes.
I don´t need both at all but the user should decide.

Cheers, mib

reverendremiel

@mib2berlin said in Option to Modify the Tab Width:

@reverendremiel
Hi, search in the feature request forum section, please.
Both of your requests are already posted years ago, iirc tab scrolling got a lot of votes.
I don´t need both at all but the user should decide.

Yeah, the problem is that neither feature seems to have been implemented, and as such, having more than 20 tabs open truncates the tab title too much, and having even more tabs open (which I have pretty much always), the tab size shrinks to an unusable size.

I don't need to see all my tabs at all times, I'm happy with seeing 10-12 tabs and having tab scrollers at each end of the tab row, like in Firefox.

This problem isn't Vivaldi specific either, it is something that plagues all Chromium based browsers and something that has been requested since Chromium's inception.

mib2berlin

@reverendremiel
Yes I understand, some user use tab stagging, two row tabs or use window panel as workaround.
The feature request https://forum.vivaldi.net/topic/24406/horizontal-tab-scrolling-instead-of-shrinking?page=1
have many votes and is in the pipeline of the developers.
I have upvote it, even I don´t need it, if you vote too we hit the 190.

Cheers, mib

Crimsonshade

I really wish I had seen this thread sooner! I made a similar request in January 2022 when Scrollable Tabs became a Vivaldi feature, as I found that having the maximum tab width "fixed" actually made scrolling the tabs less useful to me - I have to scroll too much for the number of tabs I typically have open. Plus, quite honestly, I think they start off too wide anyway. If I had seen your existing thread in a search, I would not have posted my own - but as hindsight is 20/20, I'll give you an upvote

ajgraves

I posted the following duplicate thread: https://forum.vivaldi.net/topic/78904/add-option-to-set-tab-sizes-for-scrollable-tab-bar

When you have the option "Enable Horizontal Scrolling" set on Settings > Tabs under the Tab Display section, the tabs on the tab bar don't shrink at all. I would love Vivaldi to add an option that allows you to set the tabs to shrink some as they need to, depending on how many tabs you have open.

This setting is available in the built-in Chromium flag "Tab Scrolling" with options such as "Enabled - tabs shrink to medium width" etc. However, Vivaldi does not honor these settings (I assume it's because Vivaldi uses a custom interface rather than the Chromium based interface, therefore it's on Vivaldi to add this option to their interface).