Vertical Tabs | Change Gap/Margin

nirin

Trying to change the gap/margin between vertical tabs, but there's a weird issue when dragging tabs...

Trying to increase the gap between vertical tabs, and this code does work visually, but I have noticed that when I try dragging a tab to move it to somewhere else in the queue, the tab being dragged does not remain on the mouse cursor like it should, but instead goes ahead of the cursor. I assume it's some kind of translation error due to the changes in height....

any ideas of a fix? Or a better way to adjust the size/height/margins of vertical tabs?

/* Increase tab height */
.tab-strip > span {
  display: flex;
  margin-bottom: 12px !important;
}

.tab-position {
  height: 37px !important;
}

.tab-position .tab .title {
  padding-top: 6px;
}

.tab-position .tab .tab-header .favicon {
  padding-top: 3px !important;
  -webkit-transform:scale(1) !important;
}

/* Gap between favicon and text */
span.favicon.jstest-favicon-image {
  margin-right: 4px; /* Adjust this value to increase or decrease the gap */
}

--
ModEdit: Title

sjudenim

@nirin

Dragging seems to work fine for me just adding some padding to the tab

.tab-position { padding: 5px 0; }

nirin

@sjudenim said in Vertical Tabs | Change Gap/Margin:

@nirin

Dragging seems to work fine for me just adding some padding to the tab
.tab-position { padding: 5px 0; }

Do you mean to just do that, instead of all the .css I have above? Cos just adding padding doesn't seem to work by itself, it causes a bunch of formatting issues.

nirin

https://youtu.be/TaWG-otuL94

A youtube link showing the weird behaviour. I assume it's due to some disparity between the new tab-height and the animation/translation settings for moving the objects or something (?)

Hopefully someone can help.

nirin

Unfortunately still no resolution to this... I have tried asking on reddit and elsewhere but with no luck.
I'm sure there is a solution though.

sjudenim

@nirin

I use vertical tabs as well and that was all I needed, but I use them with tab thumbnails. It seems that normal tabs are calculating the Y position differently. I will have to poke around when I get the chance

nirin

@sjudenim said in Vertical Tabs | Change Gap/Margin:

@nirin

I use vertical tabs as well and that was all I needed, but I use them with tab thumbnails. It seems that normal tabs are calculating the Y position differently. I will have to poke around when I get the chance

Yeh I don't use tab thumbnails (takes up wayyyyyy too much room for me, you can only have like 10 tabs visible even on a 4k monitor).

In fact I suspect that it probably has the same problem even on your version with tab thumbnails, but because you have so few tabs on the screen the issue doesn't become obvious. It seems like it compounds the further you move the tab, because each other tab you move past adds to the error.

Thanks for any fixes you can figure out. It's weird behaviour and it makes it harder to organise tabs.

nirin

Still haven't found a solution for this issue, hopefully someone can chime in.
I don't necessarily need a fix for the problem, if someone has an alternative way of altering the height/spacing of vertical tabs that doesn't cause the problem in the first place that would be good too!

nilsolm

@nirin

There is now apparently an experimental UI Density setting that can be enabled under vivaldi://experiments/. I assume it came with the latest update.

It doesn't allow setting a custom gap size or margin, but it increases the tab height in the vertical tabstrip. It certainly looks better than the default and it doesn't have this weird offset when you're dragging tabs.