Full sized tab bars

MasterLeo29

Based off of this post's css code, I made a version that makes it so the full width of the tab bar is always occupied, where all tab splits the width between each other.

Something like this:

and this :

And why did make this, you might ask ? Simple : A friend, and fellow Vivaldi user, asked me to xD
And I thought "well, if one person wanted this, maybe more do".
So ... here it is!

/* Change sizing of unpinned tabs */

body{
    --custom-tab-with: 100vw;
}

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

#tabs-container.top .tab-strip span,
#tabs-container.bottom .tab-strip span {
	flex: 0 1 var(--custom-tab-with) !important;
	display: flex !important;
}

#tabs-container.top .tab-position:not(.toolbar-tabbar),
#tabs-container.bottom .tab-position:not(.toolbar-tabbar) {
	flex: 0 1 var(--custom-tab-with) !important;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	height: 30px !important;
	--PositionX: inherit !important;
	--Width: inherit !important;
	max-width: var(--custom-tab-with);
}

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

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

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


.tab-position[style*="--Width:180px"] {
    width: var(--custom-tab-with) !important;
}

.tab-strip {
    display: inline-flex;
}

.tab-position {
    max-height: 30px !important;
    transform: none !important;
    position: static !important;
	
}

.toolbar-tabbar .newtab {
    left: 0 !important;
} 


.tab-header{
	justify-content: center;
}

.tab-header span.title {
	max-width: max-content;
	/* width: max-content; */
	text-wrap: pretty !important;
	flex-wrap: wrap;
}

.tab-position .tab .title:not(:has(.tab-title-edit))
{
	mask: initial;
}

.tab-position .tab .tab-header
{
	padding: inherit;
}

#browser:not(.alt-tabs) #tabs-container .tab:not(.pinned):not(.tab-small).audio-on .favicon
{
	transition-delay: 50ms;
    transform: scale(1);
}

span.tab-audio {
	right: 2px;
}

span.tab-audio .audioicon
{
	transform: scale(1) translateZ(0);
}

div#header {
    order: 0;
}

footer#footer {
    order: 1;
}

div#main {
    order: 2;
}

Have fun

Edit : a few fixed I made that forgot to post. mainly to favicons and text