Multiple Row Tabs

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.

Saved2Serve

@Hababr The darkened tabs was due to "Dim icon when hibernated' being checked under vivaldi://settings/all/

As for Firefox, now there really is not much of any difference except (Vivaladi now visually looks nicer) in the size of tabs on a 23'' monitor (19 for Vivaladi vs. 16 for FF) and the space btwn rows:

So thanks again, and I thank God for such coders as you who have a heart to improve browser efficiency.

Gelf

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

Many thanks from me too, Hababr, for getting this up and running again after the 6.9 update.
One request from me:
A while ago I'm pretty sure I downloaded a multiple row version (not sure who the author was). It gave you several rows of tabs, but there was a certain number of rows (configurable). When that number of rows was reached - three for example, you got a vertical scroll bar on the right hand side to allow you to scroll through the rows and select any tab you wanted.
Is such a thing possible?

jtwmjgpjd

Thank you @Hababr for the excellent Multiple Row Tabs customization. It has greatly improved my browsing experience in Vivaldi.

I have a request regarding pinned tabs. Currently, pinned tabs only display the favicon icon. Would it be possible to modify the CSS to both increase the width of pinned tabs and display a portion of the site title within that wider space? Having the site title visible alongside the favicon would make it much easier to identify pinned sites at a glance.

If this is achievable through CSS customization, I would greatly appreciate any guidance or code samples you could provide. Thank you again for your outstanding work!

Hababr

@jtwmjgpjd @Saved2Serve @Gelf

Hey guys, check out new version. I re-done it from scratch and posted in the correct category:
https://forum.vivaldi.net/topic/101084/css-mod-multi-row-tabs-and-more

leeuniverse

Absolutely NEED this.....

Back when I think Maxthon used to have it, it was wonderful.
Using it with Min/Max Tab size and it was great....