Update Tab Styles (Take 2)

[brett0000FF]

What does this PR do? What is the motivation?

Update after revert of #28476.

• Fix: Don't break the tabs for API docs which use .api-reference class for programming language tabs and .response-toggle for api response tabs`.
• Fix: Apply style to programming-lang-wrapper tabs outside of the API docs.

Goals:

• The update aims to improve the styling of our tabs.
• The main reason for this is to add better visual separation between tab content and the rest of the page.
• There are two tab styles: One for when the tabs don't wrap; one for when the tab are forced to wrap.
• Note: This does not update the tab style for multi-code-lang pages.

Summary of changes

SCSS:

• Refactored all tab styles into a dedicated component partial (_tab-toggle.scss).
• Implemented enhanced styling for active, hover, and focus states.
• Created a distinct secondary style for a "wrapped" tab layout (.tabs-wrap-layout).

JavaScript (codetabs.js):

• Added cleanup logic to prevent duplicate tabs during re-renders (integrated with clientFiltersManager).
• Implemented dynamic detection of tab wrapping, automatically applying .tabs-wrap-layout when needed based on content width.
• Improved active tab persistence across re-renders through cdocs.
• Ensured only unique tab titles are rendered.

No wrapping

Wrapping

Note: This copies cdocs pill style

Testing

Ensure tabs behave as expected across entire doc site.

Normal tabs w/ wrapped and unwrapped styles

Many wrapped tabs

Programming-lang-wrapper tabs

Multi-code-lang-wrapper tabs (api-reference)

Integration pages

API doc page (should have no changes)

Multi-code-lang tabs (should have no changes)

Cdocs pilot page

Merge instructions

Merge readiness:

• Ready for merge

For Datadog employees:
Merge queue is enabled in this repo. Your branch name MUST follow the <name>/<description> convention and include the forward slash (/). Without this format, your pull request will not pass in CI, the GitLab pipeline will not run, and you won't get a branch preview. Getting a branch preview makes it easier for us to check any issues with your PR, such as broken links.

If your branch doesn't follow this format, rename it or create a new branch and PR.

To have your PR automatically merged after it receives the required reviews, add the following PR comment:

/merge

Additional notes