Multiple Row Tabs

quivenda

I use newer version of the styles. I updated the code in my post.

Thanks! it's perfect now.

lkarabasl

@Hababr
Hello, could you provide a link to this file of yours for Vivaldi and please write for which version it works and where to insert it, I don’t understand anything about it.
Thank you in advance!

Hababr

@lkarabasl Save the css code from my post into a file. And follow instructions under 'Adding Style (CSS)' from here.

barbudo2005

With the last update 6.8.3381.44 the tab bar looks like this:

It appears that this code is the cause of the increased height:

#tabs-tabbar-container

{height: auto !important;
margin-top: 1px !important;
margin-bottom: 1px !important;}

Is anyone having the same problem?

fjelsten

@barbudo2005 Yes. I hope someone has knowledge to fix it.

Hababr

I have no issues with my script.

fjelsten

is what your script looks like for me

Hababr

@fjelsten Just tested one more time on the latest stable in a clean profile - looks ok. Do you have other styles? Please try only my style in a clean profile. Maybe some other settings affecting that, if we would find it I can fix.

fjelsten

Hello @Hababr - thank you for looking into this. Much appreciated.

I have no other styles - and disabling:

Display trash can
Display synced tabs button

... naturally removes it.

If I enable the Workspaces icon it also sits on the same own line.

I have gone through all options under Tabs - but no selection/unselection seems to remove it.

Hababr

@fjelsten Have you tried a clean profile?

barbudo2005

@Hababr

As in @fjelsten case, if you disable the Trash can display, the problem disappears.

But the strange thing is that if the Trash can display is enabled, it is not physically displayed in the bar.

At first sight it seems to me that it has to do with this code that I don't remember to have seen before:

.win #tabs-container:not(.none).top {
  padding-left: calc(var(--menuWidth) / var(--uiZoomLevel));
  padding-right: calc(140px / var(--uiZoomLevel));

fjelsten

This is what it looks like in a clean profile with 90 px minimum tab width

Hababr

@fjelsten That's odd. And the tabs on your screenshot is not 90px wide. Please try to add this to the end of the styles:

#tabs-container .resize {
  flex-wrap: nowrap;
}

@barbudo2005 I don't think this is the reason, icons are inside of #tabs-container.

fjelsten

Sorry but this made absolutely no difference.

Hababr

Updated code in my post to fix issues in Vivaldi 6.9.

realx3m

@Hababr Hey there,
Woke up to multirow not working anymore due to 6.9 update, but your updated code solved it.
One issue im running into though, is not being able to drag the browser window anymore when i click on empty space in the tab bar, only way to drag now is clicking in that tiny space above a tab, which is pretty annoying.
Do you think something can be done with this, or maybe its just something in my setup?

Edit: This was the code i was using before the 6.9 update with which draging worked ok.

/* Multiline tabs */
#browser.tabs-bottom #tabs-tabbar-container,
#browser.tabs-top #tabs-tabbar-container {
  height: auto !important;
}
#browser.tabs-bottom #tabs-container,
#browser.tabs-top #tabs-container {
  height: auto !important;
}
#browser.tabs-bottom #tabs-container .resize,
#browser.tabs-top #tabs-container .resize {
  display: block !important;
}
#browser.tabs-bottom #tabs-container .sync-and-trash-container .synced-tabs-button,
#browser.tabs-top #tabs-container .sync-and-trash-container .synced-tabs-button {
  align-self: flex-end;
}
#browser.tabs-bottom .tab-strip,
#browser.tabs-top .tab-strip {
  display: flex;
  flex-wrap: wrap;
}
#browser.tabs-bottom .tab-strip > span,
#browser.tabs-top .tab-strip > span {
  display: inline-block;
}
#browser.tabs-bottom .tab-strip > span > .tab-position,
#browser.tabs-top .tab-strip > span > .tab-position {
  left: 0px !important;
  position: relative;
  height: 30px !important;
  width: auto !important;
  transform: inherit !important;
}
#browser.tabs-bottom .tab-strip > span > .tab-position > .tab:not(.pinned),
#browser.tabs-top .tab-strip > span > .tab-position > .tab:not(.pinned) {
  width: 120px !important;
}
#browser.tabs-bottom .tab-strip > span > .tab-position > .tab.pinned,
#browser.tabs-top .tab-strip > span > .tab-position > .tab.pinned {
  width: 30px !important;
}
#browser.tabs-bottom .tab-strip > span > .tab-position .tab-header > .favicon > svg,
#browser.tabs-top .tab-strip > span > .tab-position .tab-header > .favicon > svg {
  height: 17px;
}
#browser.tabs-bottom .tab-strip .toolbar-tabbar,
#browser.tabs-top .tab-strip .toolbar-tabbar {
  margin-left: auto;
  position: relative;
}
#browser.tabs-bottom .tab-strip .toolbar-tabbar .newtab,
#browser.tabs-top .tab-strip .toolbar-tabbar .newtab {
  left: 0 !important;
  top: 0 !important;
  padding: 0;
  vertical-align: top;
}
#browser.tabs-bottom .tab-position .tab:hover.tab-small .close,
#browser.tabs-bottom .tab-position .tab.force-hover.tab-small .close,
#browser.tabs-top .tab-position .tab:hover.tab-small .close,
#browser.tabs-top .tab-position .tab.force-hover.tab-small .close {
  display: flex;
}
#browser.tabs-bottom .tab-position .tab:hover.active.tab-small .close,
#browser.tabs-bottom .tab-position .tab.force-hover.active.tab-small .close, #browser.tabs-bottom.linux.alt .tab-position .tab:hover.tab-small:not(.active) .favicon, #browser.tabs-bottom.linux.alt .tab-position .tab.force-hover.tab-small:not(.active) .favicon, #browser.tabs-bottom.mac .tab-position .tab:hover.tab-small:not(.active) .favicon, #browser.tabs-bottom.mac .tab-position .tab.force-hover.tab-small:not(.active) .favicon,
#browser.tabs-top .tab-position .tab:hover.active.tab-small .close,
#browser.tabs-top .tab-position .tab.force-hover.active.tab-small .close,
#browser.tabs-top.linux.alt .tab-position .tab:hover.tab-small:not(.active) .favicon,
#browser.tabs-top.linux.alt .tab-position .tab.force-hover.tab-small:not(.active) .favicon,
#browser.tabs-top.mac .tab-position .tab:hover.tab-small:not(.active) .favicon,
#browser.tabs-top.mac .tab-position .tab.force-hover.tab-small:not(.active) .favicon {
  display: flex;
}
#browser.tabs-bottom.win .tab-position .tab:hover.tab-small.active .title, #browser.tabs-bottom.win .tab-position .tab.force-hover.tab-small.active .title, #browser.tabs-bottom.linux:not(.alt) .tab-position .tab:hover.tab-small.active .title, #browser.tabs-bottom.linux:not(.alt) .tab-position .tab.force-hover.tab-small.active .title,
#browser.tabs-top.win .tab-position .tab:hover.tab-small.active .title,
#browser.tabs-top.win .tab-position .tab.force-hover.tab-small.active .title,
#browser.tabs-top.linux:not(.alt) .tab-position .tab:hover.tab-small.active .title,
#browser.tabs-top.linux:not(.alt) .tab-position .tab.force-hover.tab-small.active .title {
  display: flex;
}
#browser.tabs-bottom #tabs-container .tab.tab-small.tab-mini .tab-header,
#browser.tabs-bottom #tabs-container .tab.pinned.tab-mini .tab-header,
#browser.tabs-top #tabs-container .tab.tab-small.tab-mini .tab-header,
#browser.tabs-top #tabs-container .tab.pinned.tab-mini .tab-header {
  justify-content: initial;
  padding-left: 6px;
  padding-right: 0;
  border: none;
}
#browser.tabs-bottom #tabs-container .tab.tab-small.tab-mini .tab-header .title,
#browser.tabs-bottom #tabs-container .tab.pinned.tab-mini .tab-header .title,
#browser.tabs-top #tabs-container .tab.tab-small.tab-mini .tab-header .title,
#browser.tabs-top #tabs-container .tab.pinned.tab-mini .tab-header .title {
  display: flex;
}

/*# sourceMappingURL=multiline-tabs.css.map */

Hababr

@realx3m
This is because of a workaround for an issue: if you have two tab rows, the top one has a tab stack and the bottom one is half empty, then the tab popup thumbnail disappears when you hover over the empty area.

To disable this workaround you can remove this code:

/* Fix tabs popup closes when mouse is over empty area */
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > .toolbar {
  flex-grow: 1;
}

Another way is to add extra space between the plus and the bin icons:

#tabs-container .resize {
    padding-right: 30px;
}

realx3m

@Hababr said in Multiple Row Tabs:

@realx3m
This is because of a workaround for an issue: if you have two tab rows, the top one has a tab stack and the bottom one is half empty, then the tab popup thumbnail disappears when you hover over the empty area.

To disable this workaround you can remove this code:
/* Fix tabs popup closes when mouse is over empty area */
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > .toolbar {
  flex-grow: 1;
}
Another way is to add extra space between the plus and the bin icons:
#tabs-container .resize {
    padding-right: 30px;
}

Removed the code you suggested and now dragging works ok, thank you.

I assume this was also an issue in previous versions too, or is it something new for 6.9? As im not really sure what youre talking about, dont really use all the features of the browser, so maybe just doesnt affect my usecase as i didnt notice anything that would bother me so far.

Saved2Serve

@Hababr Thanks so much for the updated code. I updated to 6.9 and to my dismay I found all my multiple tab rows - 5, with about 100 tabs - were gone, leaving only crowded one, which developers (thank God for them) seem to think is all we should ever need.

So I returned to this forum and found you alone updated the script to work, and which it did after a restart of the browser. I also edited out the #tabs-container .resize {
padding-right: 30px;
} line.

However, tab favicons are darkened except on the top row. Otherwise, though the multiple tab rows layout does not look as good as with the Firefox hack that I use, your customization enables Vivaldi to continue to be used along with multiple installations of Firefox portable (each for their own general purpose), and Floorp.

Hababr

@Saved2Serve said in Multiple Row Tabs:

However, tab favicons are darkened except on the top row

What do you mean? Can you show a screenshot?

@Saved2Serve said in Multiple Row Tabs:

Otherwise, though the multiple tab rows layout does not look as good as with the Firefox hack

What do you miss? Maybe it's possible to achieve in my customization.