bug(trace-viewer): Overflow with TabbedPane Component

[Zemotacqy]

Closes: https://github.com/microsoft/playwright/issues/33930

• TabbedPane component now supports overflowMode param that automatically renders elements to a dropdown upon container resize.
• This is a generic component that can be applied all other UIElements where TabbedPane is used. Ex: workbench sidebar as well, making the whole view responsive.

Before:

https://github.com/user-attachments/assets/300d0d85-45f5-41ca-bcc9-ee9000edf3c6

After:

https://github.com/user-attachments/assets/62666ab9-122d-440f-8b32-39da943f5646

[github-actions[bot]]

Test results for "tests 1"

6 flaky

:warning: [firefox-library] › library/inspector/cli-codegen-1.spec.ts:986:7 › cli codegen › should not throw csp directive violation errors @firefox-ubuntu-22.04-node18
:warning: [firefox-page] › page/page-wait-for-function.spec.ts:104:3 › should work with strict CSP policy @firefox-ubuntu-22.04-node18
:warning: [chromium-library] › library/client-certificates.spec.ts:400:3 › browser › should not hang on tls errors during TLS 1.2 handshake @ubuntu-22.04-chromium-tip-of-tree
:warning: [webkit-library] › library/inspector/cli-codegen-pick-locator.spec.ts:35:7 › should update locator highlight @webkit-ubuntu-22.04-node18
:warning: [webkit-library] › library/video.spec.ts:411:5 › screencast › should capture css transformation @webkit-ubuntu-22.04-node18
:warning: [webkit-page] › page/page-screenshot.spec.ts:433:5 › page screenshot › should take fullPage screenshots during navigation @webkit-ubuntu-22.04-node18

39357 passed, 820 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[Zemotacqy]

Hey @agg23 , Did you get a chance to review this PR? Thanks in advance!!

[Zemotacqy]

Hey @agg23 , Requesting for a review.

[github-actions[bot]]

Test results for "tests 1"

1 failed :x: [playwright-test] › ui-mode-test-watch.spec.ts:145:5 › should watch all @windows-latest-node18-1

2 flaky

:warning: [firefox-library] › library/inspector/cli-codegen-1.spec.ts:1087:7 › cli codegen record › should not throw csp directive violation errors @firefox-ubuntu-22.04-node18
:warning: [playwright-test] › ui-mode-test-watch.spec.ts:145:5 › should watch all @ubuntu-latest-node24-1

47038 passed, 983 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

6 flaky

:warning: [firefox-library] › library/inspector/cli-codegen-1.spec.ts:1087:7 › cli codegen record › should not throw csp directive violation errors @firefox-ubuntu-22.04-node18
:warning: [firefox-library] › library/inspector/cli-codegen-aria.spec.ts:76:7 › should update aria snapshot highlight @firefox-ubuntu-22.04-node18
:warning: [playwright-test] › ui-mode-test-watch.spec.ts:145:5 › should watch all @ubuntu-latest-node22-1
:warning: [chromium] › headerView.spec.tsx:46:1 › should toggle filters @web-components-html-reporter
:warning: [webkit-page] › page/page-screenshot.spec.ts:345:5 › page screenshot › should work while navigating @webkit-ubuntu-22.04-node18
:warning: [playwright-test] › ui-mode-test-watch.spec.ts:145:5 › should watch all @windows-latest-node18-1

47041 passed, 979 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[agg23]

This is a lot more code that we are comfortable with for such a small feature improvement. Due to the size of our team, we need to optimize heavily for efficiency. Unfortunately that means we are closing this issue for triage.