Restyle named/unnamed "tab group" title tags

[Acumane]

The title tags that float left of a tab group seem to be unpolished and in disagreement with Brave's theme. It seems there was an attempt to style these differently than what was ported from Chromium, so I hope this can still be revisited all the same.

(Not to be mistaken for issue #14765, which is chiefly concerned with tab group spacing/overlapping)

Description

Steps to Reproduce

1. Create a new group of tabs
2. Name this group something >=1 character; observe
3. Give another new group an empty name; observe

Actual result:

Named group tags lack rounded corners and padding almost completely, contrasting starkly against the entirely round tags of the unnamed.

(I suspect the slight clipping on the left of the unnamed is due to my display scaling)

Expected result:

Something like this (Chrome 97):

... but a touch less rounded, more compact, and befitting of our Brave!

Reproduces how often:

Easily reproduced

Brave version (brave://version info)

Brave | 1.35.100 Chromium: 98.0.4758.87 (Official Build) (64-bit) -- | -- Revision | e4cd00f135fb4d8edc64c8aa6ecbe7cc79ebb3b2-refs/branch-heads/4758@{#1002} OS | Windows 10 Version 21H1 (Build 19043.1466)

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? N/A

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, looks great on Chrome!

Miscellaneous Information:

None

[urbenlegend]

I am also seeing this issue on my end.

The tab outline looks great now due to https://github.com/brave/brave-browser/issues/24095 being fixed, but the group labels definitely need to be fixed as well. It's like the last thing that will make tab groups finally look polished in Brave.

For example, look at the label Test below:

The purple box surrounding the label barely has any padding against the tab outline, making it look like its merging with it. Rounding out the corners of the label box will also make it more appealing and more in line with the unnamed group circles.