Small tweak to fix tab buttons offset

,
#1

That two-pixel offset, where the tab buttons ovelapped the tab divider was a long-term source of visual discomfort for me, and I finally figured out how to fix it:

Before:

Screenshot_2025-01-19-13-50-46-49
Screenshot_2025-01-19-13-50-46-49720Ă—1370 155 KB

After:

Screenshot_2025-01-19-14-20-50-89
Screenshot_2025-01-19-14-20-50-89720Ă—1363 153 KB

TabButtonsTweak.json (612 Bytes)

2 Likes
#2

I’m sorry, I’m often an bit slow on these things, but I’ve been playing spot the difference for 5 mins and I can’t see it?!

#3

Well, i should have zoomed it

IMG_20250119_165248
IMG_20250119_165248720Ă—387 30 KB

Screenshot_2025-01-19-16-51-47-53
Screenshot_2025-01-19-16-51-47-53720Ă—381 24.7 KB

1 Like
#4

Thanks.

For those who’d like to copy-paste without downloading, here’s the code within that stylesheet:

.tc-tab-buttons {
	margin-bottom: -1px;
}.tc-tab-buttons button.tc-tab-selected {
	border-bottom: 1px solid #ffffff;
}.tc-tab-buttons button {
	border-bottom: 1px solid #cccccc;
}.tc-sidebar-lists .tc-tab-buttons button.tc-tab-selected {
	border-bottom: 1px solid #f4f4f4;
}.tc-sidebar-lists .tc-tab-buttons button {
	border-bottom: 1px solid #cccccc;
}

Ideally, you’d make this palette-responsive. As is, if you change the palette, say to Contrast (Dark), the card-coded light color creates an effect different from what you want:

image
image1172Ă—930 64.2 KB

#5

Something like this works across palettes (though there may be some additional details specifiable that would make a difference in some palettes:

.tc-tab-buttons {
	margin-bottom: -1px;
}.tc-tab-buttons button.tc-tab-selected {
	border-bottom: 1px solid <<colour tab-background-selected>>;
}.tc-sidebar-lists .tc-tab-buttons button.tc-tab-selected {
	border-bottom: 1px solid <<colour sidebar-tab-background-selected>>;
}```
1 Like
#6

It is responsive, I just forgot to set the code-body field. It should read like that:

.tc-tab-buttons {
	margin-bottom: -1px;
}

.tc-tab-buttons button.tc-tab-selected {
	border-bottom: 1px solid <<colour tab-background-selected>>;
}
.tc-tab-buttons button {
	border-bottom: 1px solid <<colour tab-divider>>;
}
.tc-sidebar-lists .tc-tab-buttons button.tc-tab-selected {
	border-bottom: 1px solid <<colour sidebar-tab-background-selected>>;
}
.tc-sidebar-lists .tc-tab-buttons button {
	border-bottom: 1px solid <<colour sidebar-tab-divider>>;
}

But it looks like I found another, much shorter solution:

.tc-tab-buttons {
	margin-bottom: -1px;
    vertical-align: bottom;
}

TabButtonsTweak-2.json (225 Bytes)

1 Like
#7

That solution doesn’t necessarily work across palettes:

image
image1166Ă—1100 70.6 KB

1 Like
#8

It is not a palette issue, rather some cross-browser weirdness:

WeirdTabs
WeirdTabs1532Ă—614 102 KB

(Mozilla on the left, Chrome on the right).

Anyway, your variant gives more consistent results.

1 Like
#9

hmmm. Probably there is a reason, why it is as it is :wink:

As you found out. If “tolerances” are too tight, there are problems between how browsers calculate scaled UIs. Eg. On my laptop I use up to 200% browser scaling for text based UIs. On my PC I am usually at around 120%

TWs CSS was mainly based on pixel values initially. Now it contains a mix of all sort of units. That can cause rounding problems from time to time.

Tab-button-borders are one of them.

1 Like