Tab grouping UI is wrong

[Stephcraft]

Description

The new tab group feature has UI problems. The group name label is not rounded corner and it is not spaced properly with the grouped tabs. The grouped border of the selected tab in the group is bigger than all other tabs. I've attached an image of what it looks like vs what it looks like in chrome (great ui design)

Steps to Reproduce

1. Open a couple tabs
2. Right click on a tab > Add tab to group
3. Give a name to the group

Actual result:

Expected result:

Reproduces how often:

Always reproduced

Brave version

1.21.77

Version/Channel Information:

• Can you reproduce this issue with the current release? Yes
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? No
• Does the issue resolve itself when disabling Brave Rewards? No
• Is the issue reproducible on the latest version of Chrome? No, It looks good on chrome

Miscellaneous Information:

None

[not-a-dev-stein]

Having the same issue here. I have used Ungoogled Chromium for a while before coming back to Brave yesterday, so it really weirded me out why this visual stuff is happening.

The best I'm able to do to deal with this for now is adding a space before and after the tab group name to have a little more proper spacing to the title.

[karenkliu]

@rebron No design mockups required; this is a feature fully ported over from Chromium and it should look like the expected result posted in the issue.

[jdsimcoe]

I've noticed this same border clipping issue (but only on system light mode). On dark mode the Tab Group stroke appears more standard:

[NeuronSooup]

I wonder if this 2 year old issues has been resolved yet? Oh that is right, it hasn't. Nevermind, I guess injecting Ads in Brave Search is more important

[jdsimcoe]

@NeuronSooup looks visually resolved to me

[Stephcraft]

@NeuronSooup looks visually resolved to me

That's true, some progress has been made, but there are still 3 mistakes:

1. In this case, everything is good, but perhaps we could have even more rounded corners for the label, so it stays consistent with the empty circle design:

2. When the window is maximized or/and the first tab of the group is selected, the edges touch:

3. When the last tab of the group is selected, the border is no longer rounded at the end (Like in your case):

vs

[jdsimcoe]

ah yeah that's weird

[Stephcraft]

Let's goooo!!