Option to Lock the Height of the Tab Bar

tsunamy

I like to use only a few pixels of the height of the tabs preview, but If I doble click by accident on top of address bar, the height of the tabs preview reach max.

I attach a image with the issue for me.

This could be fixed adding a simple lock height button on the tabs bar or on the right click menu.

barbudo2005

@tsunamy Use this code:

.tab-strip > span > .tab-position

{height: 45px !important;}

tsunamy

@barbudo2005 said in Option to Lock the Height of the Tab Bar:

@tsunamy Use this code:

.tab-strip > span > .tab-position

{height: 45px !important;}

Where?

I want to use this on all tabs and lock the heigh of the tab row.

barbudo2005

@tsunamy With a text editor make a file with extension css and paste the code above.

Put the file outside de Vivaldi folder.

In vivaldi://experiments/

Enable Allow for using CSS modifications.

Paste the path of the folder where you put the file, here in Settings:

Reload Vivaldi.

tsunamy

@barbudo2005 It's even worst than before. The tab height is fixed, but the tab row height remains modifiable:

proof (1).png

barbudo2005

@tsunamy I can't reproduce it because of my mods. Sorry.

Maybe someone could help you

nomadic

@tsunamy Try this:

#tabs-tabbar-container {
  height: auto !important;
  --tab-thumbnail-height: 45px;
}

#tabs-container {
  height: var(--tab-thumbnail-height);
}

#tabs-subcontainer {
  height: var(--tab-thumbnail-height);
  flex-basis: unset !important;
}

/* Optional for centering new tab buttons */
.tab-position .newtab {
  margin-top: calc((var(--tab-thumbnail-height) - var(--Height)) / 2);
  --PositionY: unset !important;
  top: unset !important;
}

You can set the height by modifying this value: --tab-thumbnail-height: 45px;

Also, the last part is optional, it just centers the new tab buttons vertically.

tsunamy

@nomadic Thank you so much. I tuned a bit the code, to use 60px on height and no height on subcontainer. The code is working awesome.

#tabs-tabbar-container {
  height: auto !important;
  --tab-thumbnail-height: 60px;
}

#tabs-container {
  height: var(--tab-thumbnail-height);
}

#tabs-subcontainer {
  /*height: var(--tab-thumbnail-height);	*/
  flex-basis: unset !important;
}

/* Optional for centering new tab buttons */
/*.tab-position .newtab {
  margin-top: calc((var(--tab-thumbnail-height) - var(--Height)) / 2);
  --PositionY: unset !important;
  top: unset !important;
}*/

tsunamy

Anyway this is not a perfect solution to this issue. Only a Lock option is the best solution.

Thank you all for your support.

LonM

Thank you for your request. As this post has had less than 5 votes over 4 years it will now be archived. If something still isn't working or is missing, you can open a new thread or search to see if a newer one has already been opened.