Merge tabs and address bar

[oudstand]

@abolog for the problem with the new tab icon I wrote this JS mod. This should fix you problem

@oudstand said in Merge tabs and address bar:

As addition to the code above, I wrote this JS mod to dynamically adjust the padding of the tabs to the extensions as soon as the number of visible extensions changes:

/*
    adjusts the padding of the tabs container to the extensions if the number of visible extension changes
*/
setTimeout(function waitMergeTabbar() {
    const browser = document.getElementById('browser');
    if (browser) {
        observeExtensionsWidth();
    } else {
        setTimeout(waitMergeTabbar, 300);
    }
}, 300);

function observeExtensionsWidth() {
    let toolbarExtensions = document.querySelector('.toolbar-extensions');
    if (!toolbarExtensions) {
        setTimeout(observeExtensionsWidth, 300);
        return;
    }
    let tabsContainer = document.querySelector('#tabs-container.top'),
        resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                tabsContainer.style.paddingRight = (entry.target.offsetWidth + 137) + 'px';
            }
        });
    resizeObserver.observe(toolbarExtensions);
}

For your other problem I've updated the code in the post before.

@oudstand said in Merge tabs and address bar:

@abolog You can try this code. For me it's working fine like this:

/* 
  https://forum.vivaldi.net/topic/34187/merge-tabs-and-address-bar?_=1593593936120

   One-line UI for Vivaldi 2.8+

   Before using this style, please 
   * remove the search bar (or adjust space-from-left below)
   * disable extension toggle button, profile switch button and menu bar
   * adjust the current theme to apply accent color to window (not toolbar)
   * make sure you've enabled the Alt key to open menu (keyboard settings)
   Otherwise you'll have to modify the style further to suit your usage.

   The style is meant to be used primarily in a window, 
   on restored windows it may not look as good. 

   Inspired by https://forum.vivaldi.net/topic/13042/one-line-ui-help-wanted
*/

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 14em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 35px;
}
.toolbar-mainbar {
    top: -0.2em !important;
}
.UrlBar.toolbar {
    position: absolute;
}
.UrlBar .toolbar-droptarget {
    position: fixed;
}
.UrlBar-AddressField {
    position: absolute;
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 110px;
}
#tabs-container {
    padding-left: calc(26vw + 140px) !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
.maximized .toolbar-extensions {
    right: -91vw !important;
    top: 0px !important;
}
.toolbar-extensions {
    position: absolute;
    top: 4px !important;
    right: calc(var(--space-from-right) - 100vw) !important;
}
.toolbar-extensions .button-toolbar {
    margin-top: 3px;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}
.UrlBar-AddressField {
    margin-top: 12px;
}
.maximized .toolbar-droptarget>.button-toolbar {
    top: 4px;
}
.toolbar-droptarget>.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}
.vivaldi {
    top: -7px;
    left: 5px;
}
.maximized #tabs-container {
    min-height: 35px;
    margin-top: 0;
}
#tabs-container {
    min-height: unset;
    margin-top: -3px;
}
.button-toolbar.newtab {
    margin-top: -3px !important;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}

[abolog]

@oudstand

Niiiiice, now it works, finally. Thanks again.

One question though, is it possible to avoid the JS and set a static padding? As I never change/add buttons to the extension toolbar, I always open the pop-up and access them from there.

[oudstand]

@abolog You're welcome

Instead of the JS mod you can try something like this. Maybe you have to adjust the values a bit for your needs.

#tabs-container {
    padding-right: calc(10px + var(--space-from-right)) !important;
}

[abolog]

@oudstand
Bruh that's genius. Saved the day. Now it's perfect.

[abolog]

Aaaaand it's screwed again.
Latest update.
Any ideas?
@oudstand @Tharq

[nomadic]

@abolog What exactly is the issue(s)?

I can take a look, but since I am not too familiar with the mod, it would help to know what to investigate.

[abolog]

This is what used to work fine, but now the extension toolbar is over the minimise button

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 14em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 10px;
}
.toolbar-mainbar {
    top: -0.2em !important;
}
.UrlBar.toolbar {
    position: absolute;
}
.UrlBar .toolbar-droptarget {
    position: fixed;
}
.UrlBar-AddressField {
    position: absolute;
    width: 11vw !important;
    /* Set a fixed width for address bar */
    left: 110px;
}
#tabs-container {
    padding-left: calc(11vw + 120px) !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
.maximized .toolbar-extensions {
    right: -94vw !important;
    top: 0px !important;
}
.toolbar-extensions {
    position: absolute;
    top: 4px !important;
    right: calc(var(--space-from-right) - 102vw) !important;
}
.toolbar-extensions .button-toolbar {
    margin-top: 3px;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}
.UrlBar-AddressField {
    margin-top: 12px;
}
.maximized .toolbar-droptarget>.button-toolbar {
    top: 4px;
}
.toolbar-droptarget>.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}

.maximized #tabs-container {
    min-height: 35px;
    margin-top: 0;
}
#tabs-container {
    min-height: unset;
    margin-top: -3px;
    padding-right: calc(25px + var(--space-from-right)) !important;
}
.button-toolbar.newtab {
    margin-top: -3px !important;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}

@nomadic

[oudstand]

@abolog this is the code I use and it's working fine for me:

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}
:root {
    --space-from-left: 46.5em;
    /* Main toolbar space - adjust according to your buttonset */
    --space-from-right: 14em;
    /* Extension toolbar space - adjust according to your tab bar buttons (cloud, trashbin, ...) */
}
.UrlBar {
    margin-left: 35px;
}
.toolbar-mainbar {
    top: -0.2em !important;
}
.UrlBar.toolbar {
    position: absolute;
}
.UrlBar .toolbar-droptarget {
    position: fixed;
}
.UrlBar-AddressField {
    position: absolute;
    width: 25vw !important;
    /* Set a fixed width for address bar */
    left: 110px;
}
#tabs-container {
    padding-left: calc(26vw + 140px) !important;
    /* Make sure overlays work */
}
.toolbar-mainbar, .toolbar-mainbar {
    background-color: var(--colorBg) !important;
    /* Append the background color */
    height: 38px;
}
.maximized .toolbar-extensions {
    top: 0px !important;
}
.toolbar-extensions {
    position: absolute !important;
    left: unset !important;
    top: 4px !important;
    right: calc(var(--space-from-right) - 100vw) !important;
    background-color: var(--colorBg) !important;
}
.toolbar-extensions .button-toolbar {
    margin-top: 3px;
}
.toolbar-mainbar:after, .toolbar-mainbar:after, .toolbar-extensions:after, .toolbar-tabbar:after {
    display: none !important;
    /* Remove a weird white line below the toolbar */
}
.maximized .UrlBar-AddressField {
    margin-top: 1.5px;
}
.UrlBar-AddressField {
    margin-top: 12px;
}
.maximized .toolbar-droptarget>.button-toolbar {
    top: 4px;
}
.toolbar-droptarget>.button-toolbar {
    top: 8px;
}
.maximized .vivaldi {
    top: -2px;
}
.vivaldi {
    top: -7px;
    left: 5px;
}
.maximized #tabs-container {
    min-height: 35px;
    margin-top: 0;
}
#tabs-container {
    min-height: unset;
    margin-top: -3px;
}
.button-toolbar.newtab {
    margin-top: -3px !important;
}
.popup .toolbar-mainbar {
    visibility: hidden;
    /* hides the toolbar for apps */
}
.maximized #header {
    height: 35px;
}
#header {
    height: 39px;
}
/* move button for update to the right position */

button[title="Aktualisierung Bereit"] {
    top: 47px;
    right: calc(-100vw + 80px);
    position: absolute;
    height: 20px !important;
    /* shows the update button on a better readable position */
}
.bookmark-bar button:hover {
    border-radius: 10px;
}

[abolog]

@oudstand
Ok works perfectly now, many thanks +

[nomadic]

@abolog Knew I was forgetting something. Glad @oudstand was able to help

[oudstand]

With the latest Snapshot version the mod stopped working, so I wrote it again from scratch. I managed to get it work even with half of the code. Feel free to use it:

#tabs-container {
    position: fixed;
    left: calc(26vw + 140px) !important;
    right: 0;      
}

.win.normal #tabs-container{
    margin-top: -10px !important;
    margin-right: -20px !important;
}

.tab-group-indicator {
    top: 0 !important;
}

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw !important;
    top: 1px !important;
}

.win.normal .UrlBar-AddressField {
    top: 1px;
}

.toolbar-mainbar:not(.toolbar-wrap) {
    position: absolute;
    top: -1px;
    left: 30px !important;
    height: 30px;
    background: var(--colorBg) !important;
}

.toolbar-mainbar {
     background: var(--colorBg) !important;
}

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}

.toolbar-extensions {
    position: absolute !important;
    transform: translate(-100%);
    background-color: var(--colorBg) !important;
    left: calc(100vw - 160px) !important;
    height: 30px !important;
    right: unset !important;
}

.toolbar-extensions:after {
    content: none !important;
}

.vivaldi {
    margin-top: 1px !important;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
}

To adjust the distance between browser tabs and extensions dynamic I use this JS mod:

/*
    adjusts the padding of the tabs container to the extensions if the number of visible extension changes
*/
setTimeout(function waitMergeTabbar() {
    const browser = document.getElementById('browser');
    if (browser) {
        observeExtensionsWidth();
    } else {
        setTimeout(waitMergeTabbar, 300);
    }
}, 300);

function observeExtensionsWidth() {
    let toolbarExtensions = document.querySelector('.toolbar-extensions');
    if (!toolbarExtensions) {
        setTimeout(observeExtensionsWidth, 300);
        return;
    }
    let tabsContainer = document.querySelector('#tabs-container.top'),
        resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                tabsContainer.style.paddingRight = (entry.target.offsetWidth + 137) + 'px';
            }
        });
    resizeObserver.observe(toolbarExtensions);
}

If you don't want to use the JS mod, because you always have the same amount of extension, you can just add a padding-right to #tabs-container. Just test which value fits for you. If you do so, you probably can remove the margin-right: 50px; from this block, but I didn't test it:

.win.normal #tabs-container{
    margin-top: -10px !important;
    margin-right: 50px;
}

[JoaoPauloS]

@oudstand Thanks for the code! Any way to make it work with 2 level piles tab?

[oudstand]

@JoaoPauloS said in Merge tabs and address bar:

@oudstand Thanks for the code! Any way to make it work with 2 level piles tab?

You're welcome. Since I always used stacked tab groups I didn't try this.

[Mrxyzl]

@oudstand i manage to bring your css to my browser but there are white line under the toolbar and extension toolbar and i cant figure it out why this happen.
Do you have any suggestion?

[oudstand]

@Mrxyzl I've updated my code. Your problem should be fixed now.

[Mrxyzl]

@oudstand Thanks, i manage to fix that by adding

.toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after {
	 display: none !important;
}

I have no idea what i did though.
For some reason, your css doesnt work on the 5.3.2679.36 (Stable channel) (64-bit) for me , ie: changing left value

#tabs-container {
    position: fixed;
    left: calc(26vw + 140px) !important;
    right: 0;      
}

doesnt bring tab bar to the left
So i try mixing the old code in and somehow it work. Heres my css if anyone interested

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}

#tabs-container {
    padding-left: calc(24vw + 150px) !important;
	padding-right: 185px !important;
	padding-top: 0px !important;
	margin-top: 0px;
	min-height: 32px;
    /* Make sure overlays work */
}
.maximized #tabs-container {
    min-height: 32px;
    margin-top: 0px;
}
#tabs-container .resize {
    min-height: 32px;
    margin-top: 3px;
}
.tab-group-indicator {
    top: 0 !important;
}

.win.normal #titlebar {
    top: 0px;
}

.UrlBar-AddressField {
    width: 24vw !important;
    top: 0px !important;
}

.win.normal .UrlBar-AddressField {
    top: 0px;
}

.toolbar-mainbar:not(.toolbar-wrap) {
    position: absolute;
    top: 0px;
    left: 35px !important;
    height: 35px;
    background: var(--colorAccentBg) !important;
	border: none !important;
}

.toolbar-mainbar {
     background: var(--colorAccentBg) !important;
	 border: none !important;
}

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
	border: none !important;
}

.toolbar-extensions {
    position: absolute !important;
    transform: translate(-100%, 0);
    background-color: var(--colorAccentBg) !important;
    left: calc(100vw - 220px) !important;  
	height: 35px;
	top: 0px;
	border: none !important;
}
.toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after {
	 display: none !important;
}
.maximized .toolbar-extensions{
    left: calc(100vw - 150px) !important; 
    height: 35;
	top: 0px;
}

.vivaldi {
    margin-top: -4px !important;
}
.maximized .vivaldi {
    margin-top: 1px !important;
}
#header, #main {
    position: unset;
}

#header {
    height: 35px;
}

.maximized .toolbar-tabbar.sync-and-trash-container {
		top: 0px !important;
}
.maximized .window-buttongroup {
	height: 35px !important;
	width: 120px !important;
	top: 2px !important;
}
.window-buttongroup {
	height: 35px !important;
	width: 120px !important;
	top: -2px !important;
}
.win10.normal #tabs-tabbar-container.top {
	padding-top: 0px !IMPORTANT;
}
.button-toolbar.newtab {
	top: 0px !important;
}
.maximized .button-toolbar.newtab {
	top: 0px !important;
}

Work perfectly for me on both maximized and windowed

[oudstand]

@Mrxyzl said in Merge tabs and address bar:

@oudstand Thanks, i manage to fix that by adding

.toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after {
	 display: none !important;
}

I just wanted to write that I've updated my code since I use this too. My other update caused a small bug.

I didn't test my code with the stable version yet, so I don't know if its working or not.

[Mrxyzl]

@oudstand said in Merge tabs and address bar:

With the latest Snapshot version the mod stopped working, so I wrote it again from scratch. I managed to get it work even with half of the code. Feel free to use it:

#tabs-container {
    position: fixed;
    left: calc(26vw + 140px) !important;
    right: 0;      
}

.win.normal #tabs-container{
    margin-top: -10px !important;
    margin-right: -20px !important;
}

.tab-group-indicator {
    top: 0 !important;
}

.win.normal #titlebar {
    top: -5px;
}

.UrlBar-AddressField {
    width: 27vw !important;
    top: 1px !important;
}

.win.normal .UrlBar-AddressField {
    top: 1px;
}

.toolbar-mainbar:not(.toolbar-wrap) {
    position: absolute;
    top: -1px;
    left: 30px !important;
    height: 30px;
    background: var(--colorBg) !important;
}

.toolbar-mainbar {
     background: var(--colorBg) !important;
}

.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}

.toolbar-extensions {
    position: absolute !important;
    transform: translate(-100%);
    background-color: var(--colorBg) !important;
    left: calc(100vw - 160px) !important;
    height: 30px !important;
    right: unset !important;
}

.toolbar-extensions:after {
    content: none !important;
}

.vivaldi {
    margin-top: 1px !important;
}

#header, #main {
    position: unset;
}

#header {
    height: 30px;
}

To adjust the distance between browser tabs and extensions dynamic I use this JS mod:

/*
    adjusts the padding of the tabs container to the extensions if the number of visible extension changes
*/
setTimeout(function waitMergeTabbar() {
    const browser = document.getElementById('browser');
    if (browser) {
        observeExtensionsWidth();
    } else {
        setTimeout(waitMergeTabbar, 300);
    }
}, 300);

function observeExtensionsWidth() {
    let toolbarExtensions = document.querySelector('.toolbar-extensions');
    if (!toolbarExtensions) {
        setTimeout(observeExtensionsWidth, 300);
        return;
    }
    let tabsContainer = document.querySelector('#tabs-container.top'),
        resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                tabsContainer.style.paddingRight = (entry.target.offsetWidth + 137) + 'px';
            }
        });
    resizeObserver.observe(toolbarExtensions);
}

If you don't want to use the JS mod, because you always have the same amount of extension, you can just add a padding-right to #tabs-container. Just test which value fits for you. If you do so, you probably can remove the margin-right: 50px; from this block, but I didn't test it:

.win.normal #tabs-container{
    margin-top: -10px !important;
    margin-right: 50px;
}

I figured out why 2 level tab stack doesnt work with this
By changing the value:

> #header {
>     height: unset;
> }

I manage to have 2 level tab stack

[abolog]

This post is deleted!

[Mrxyzl]

Hi, i refactor the fact that if we set toolbar mainbar top to 0 with position as absolute, if we enable the empty space above tab bar, the browser will look ugly, so i instead use transform to move it up instead

Heres my code

/* Merge tab bar and addressbar */
.win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
}
#main {
    position: unset;
}

.maximized #tabs-container:not(.none).top {
    padding-left: calc(24vw + 145px) !important;   /* Adjust acording to left button, 35px each */
	padding-right: 170px !important;  /* Adjust acording to number of extension, 35px each*/
	padding-top: 0px !important;
	margin-top: 0px;
	min-height: 30px;
	transition: 0.3s;

}
.maximized#browser:has(.UrlBar-PrivateWindowIndicator) #tabs-container:not(.none).top { /*fix private icon in private tab - need to enable experimental web platform feature in vivaldi://flags for the :has() selector to work */
	 padding-left: calc(24vw + 178px) !important; 
}

.maximized #tabs-container .resize {
    min-height: 30px;
    margin-top: 0px;
}
.maximized .tab-group-indicator {
    top: 0 !important;
}

.win.normal #titlebar {
    top: 0px;
}

.maximized .UrlBar-AddressField {
    width: 24vw !important;
    top: 0px !important;
}

.maximized .win.normal .UrlBar-AddressField {
    top: 0px;
}

.maximized .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) {  /* move the addressbar and extension bar to tab bar */
    position: absolute;
    top: unset; /* dont set it to 0 */
    left: 35px !important;
    height: 30px;
    background: var(--colorAccentBg) !important;
	border: none !important;
	transform: translateY(-30px); /* use instead of top =0 to fix showing or not showing empty space above tab */
}
.maximized#browser:has(#tabs-subcontainer.top) .toolbar-mainbar:not(.toolbar-wrap):not( .toolbar-editor section.dialog-preview .toolbar):not(.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large) { /* Fix tab stack bar on one liner */
transform: translateY(-60px); 
}

.maximized .toolbar-mainbar {
	background:transparent;
	border-radius: var(--radiusHalf);
}
.toolbar-mainbar {
     background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), var(--colorAccentBgDarker);
	 	transition: background-color 0.7s ease-out;
}

.maximized .win.normal .toolbar-mainbar {
    left: unset;
    right: unset;
	border-radius: var(--radiusHalf)!important;
}

.color-behind-tabs-on#browser.tabs-top #header {
	transition:0.7s ease-out;
}

.maximized #main > div.mainbar > div > div.toolbar-extensions { /* Only affect extension button on mainbar */
    position: absolute !important;
    transform: translate(-100%, 0);
    background-color: var(--colorAccentBg) !important;
	transition: background-color 0.7s ease-out;
    left: calc(100vw - 135px) !important;   /* Adjust acordingly*/
    height: 30px !important;
	top: 0px;
	border-radius: var(--radiusHalf)!important;
}
.toolbar-mainbar .toolbar-extensions {
	background-color: transparent;
}
.toolbar-mainbar .toolbar-extensions:after, .toolbar-mainbar:after {
	 display: none !important;
}
.maximized .toolbar-mainbar .toolbar-extensions > .button-toolbar > button{
	height:30px;
}
	
.maximized .toolbar-mainbar > .button-toolbar > button {
   height:30px;
}

/*.vivaldi {
    margin-top: -6px !important;  /* Adjust acordingly*/
}
.maximized .vivaldi {
    margin-top: 0px !important;
}
.maximized #header, #main {
    position: unset;
}

.maximized #header {
    height: unset;
}

.maximized .toolbar-tabbar.sync-and-trash-container {
		top: 0px !important;
}
.maximized .window-buttongroup { 
	height: unset !important;
	width: 100px !important;
	top: 0px !important;
}
.maximized #browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi) {
    height: unset;
}
.maximized .tabs-at-edge.fullscreen#browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi), .tabs-at-edge.maximized#browser.win.win10.tabs-top #header #titlebar .window-buttongroup button:not(.vivaldi) {
    height: 30px;
}
.maximized .win10.normal #tabs-tabbar-container.top {
	padding-top: 0px !IMPORTANT;
}

.maximized .UrlBar-PrivateWindowIndicator {
  /*Fix in private mode indicator when merge bar*/
	font-size: 0;	
	padding: 0 6px 0 6px;
}

.tabs-right#browser.win.win10 .tabs-bottom#browser.win.win10 .tabs-left#browser.win.win10, #browser.win.win10 #header #titlebar .window-buttongroup button {
    height: 30px;  /* fix some weird window button group height bug on different tab style */
}
#browser:not(.tabs-top) .vivaldi {
    height: 30px;
    padding: 0;
}


.win #titlebar #pagetitle > span, .linux #titlebar #pagetitle > span {
    text-align: left;   /* fix page title alignment on different tab mode */
    margin-left: 38%;
    width: 42vw;
}

.win10.normal #tabs-tabbar-container.top {  /* Fix super huge header on window mode */
    padding-top: 6px;
}

/* Fix mail tab display */

.maximized#browser:has(.toolbar-mailbar.toolbar-large) #tabs-container:not(.none).top {
	padding-left: 35px !important; 
}
.maximized#browser:has(.toolbar-mailbar.toolbar-large) .mainbar {
	    top: unset;
		position:relative;
}
.maximized .toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-mailbar.toolbar-large {
    width: 100vw;
	left:0px;
}