Multiple Row Tabs
-
@Hababr said in Multiple Row Tabs:
Here is the version I use, width of the tabs at the top and inside the stack can be configured separately.
/* Multiple Row Tabs - Created by @hababr. Version 2023.10.31. Base on work of and inspired by @nomadic, @fpdragon, @potmeklecbohdan, @alexander.gorbovets, @barbudo2005. */ /* Configuration */ :root { /* That will be the minimum width of a tab. You can adjust the number as you like. */ --mrt-min-width: 82px; } #tabs-subcontainer { --mrt-min-width: 102px; } .tab-strip.horizontal-scrolling { /* That will be the tab width is case Horizontal Scrolling is enabled. */ --mrt-hs-width: 50px; } /* Changes to allow multi row tab bar */ #browser:is(.tabs-top, .tabs-bottom) #tabs-tabbar-container { height: auto !important; } /* Fix overflow issue on secondary bar */ #browser:is(.tabs-top, .tabs-bottom) #tabs-subcontainer { flex-basis: unset !important; } #browser:is(.tabs-top, .tabs-bottom) .tab-strip { display: flex; flex-wrap: wrap; } #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span, #browser:is(.tabs-top, .tabs-bottom) .tab-strip > .tab-position { /*display: inline-block;*/ display: flex; position: relative; height: 30px; --PositionX: 0px !important; } #browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space { --PositionX: 0px !important; height: 30px !important; } #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position { --PositionX: 0px !important; height: 30px !important; } /*#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:is([style*="--Height: 150px;"]),*/ #browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space:is(:not([style*="--Width: 31px;"]), :not([style*="--ZIndex: 2;"])), #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:is(:not([style*="--Width: 31px;"]), :not([style*="--ZIndex: 2;"])) { --Width2: var(--mrt-hs-width, var(--Width)); min-width: min(var(--mrt-min-width), var(--Width2)*99999) !important; width: var(--Width2); } #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position, .toolbar-tabbar > .newtab { position: static !important; } /* Keep title visible on tabs */ #browser:is(.tabs-top, .tabs-bottom) .tab.tab-small .tab-header .title { display: flex !important; } /* Keep tab stack counter visible */ #browser:is(.tabs-top, .tabs-bottom) .tab-position .tab.tab-small .stack-counter { display: block !important; } /* Keep tab header style */ #browser:is(.tabs-top, .tabs-bottom) .tab.tab-small.tab-mini .tab-header, #browser:is(.tabs-top, .tabs-bottom) .tab.pinned.tab-mini .tab-header { padding-left: 6px !important; border: none !important; justify-content: normal !important; } /* Fix width for tab stack border when selected */ #browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:not([style*="--Width: 0px"]) .tab { --Width2: max(100%, var(--mrt-min-width)); } /*#browser:is(.tabs-top, .tabs-bottom) .tab-position:not(.is-substack) .svg-tab-stack, .tabs-top .svg-tab-selection {*/ #browser:is(.tabs-top, .tabs-bottom) .svg-tab-stack, .tabs-top .svg-tab-selection { width: calc(var(--Width2) + 0px) !important; } #browser:not(.alt-tabs, .tabs-left, .tabs-right) .tab-position .tab:hover.tab-small.active .favicon { flex-shrink: 0 !important; } /* When tab scrolling is enabled */ .horizontal-scroll-arrow { padding: 0 !important; } #tabs-container .resize > .toolbar.toolbar-tabbar, #tabs-subcontainer > .toolbar.toolbar-tabbar { flex-shrink: 0; }This code affected the pinned tab when it was inactive. How can this code not affect the pinned tab when it was inactive? Thanks.
-
@quivenda said in Multiple Row Tabs:
This code affected the pinned tab when it was inactive. How can this code not affect the pinned tab when it was inactive? Thanks.
I use newer version of the styles. I updated the code in my post.
-
@Hababr said in Multiple Row Tabs:
I use newer version of the styles. I updated the code in my post.
Thanks! it's perfect now.
-
@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! -
@lkarabasl Save the css code from my post into a file. And follow instructions under 'Adding Style (CSS)' from here.
-
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?
-
@barbudo2005 Yes. I hope someone has knowledge to fix it.
-
I have no issues with my script.
-
is what your script looks like for me -
@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.
-
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.
-
@fjelsten Have you tried a clean profile?
-
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)); -
This is what it looks like in a clean profile with 90 px minimum tab width
-
@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.
-
Sorry but this made absolutely no difference.
-
Updated code in my post to fix issues in Vivaldi 6.9.
-
@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 */ -
@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; } -
@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.
