[Feature]: Either deduplicate the badge when tag and project name are the same string, or visually distinguish project badges from tag badges (e.g. different color, shape, or prefix).

Nobody has claimed this yet.

### 🚀 Feature Request

Describe the bug / UX issue:
HTML reporter shows duplicate badge when tag name matches project name

When a test's tag matches the project name (e.g. project ad2 and tag @ad2), the HTML report renders two identical badges side by side — one for the project, one for the tag. There's
no visual distinction between them, making the duplicate confusing and redundant.

### Example

To reproduce:
// playwright.config.ts
{ name: 'ad2', grep: /@ad2/ }

// spec file
test.describe('My suite', { tag: ['@ad2'] }, () => { ... })
Run with --project ad2 → report shows ad2 ad2 badges on the test row.

### Motivation

Expected behavior:
Either deduplicate the badge when tag and project name are the same string, or visually distinguish project badges from tag badges (e.g. different color, shape, or prefix).

Playwright version: 1.60.0

Start with the HTML reporter by reproducing the issue using a project named ad2, a @ad2 tag, and the --project ad2 run described here. Inspect how project and tag badges are rendered, then verify that identical badges are either deduplicated or visually distinguished in the report.

Written by the indexing model from the issue text.