fix: truncated filters on network tab

[reyrodrigez]

• make network category filters scrollable
• add ellipsis to filter input placeholder

fixes: #33930

Before:

After:

[github-actions]

Test results for "tests 1"

7 flaky

⚠️ [firefox-page] › tests/page/page-evaluate.spec.ts:403:3 › should throw for too deep reference chain @firefox-ubuntu-22.04-node18
⚠️ [playwright-test] › tests/ui-mode-test-output.spec.ts:80:5 › should show console messages for test @macos-latest-node18-1
⚠️ [chromium-page] › tests/page/page-event-popup.spec.ts:149:3 › should not treat navigations as new popups @ubuntu-20.04-chromium-tip-of-tree
⚠️ [webkit-library] › tests/library/inspector/cli-codegen-1.spec.ts:643:7 › cli codegen › should select with size attribute @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/proxy.spec.ts:63:3 › should work with IP:PORT notion @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-set-input-files.spec.ts:205:3 › should upload multiple large files @webkit-ubuntu-22.04-node18
⚠️ [playwright-test] › tests/ui-mode-test-watch.spec.ts:145:5 › should watch all @windows-latest-node18-1

37596 passed, 648 skipped
✔️✔️✔️

Merge workflow run.

[reyrodrigez]

Hey @agg23 could you take a look please?

[pavelfeldman]

Scrollable toolbar isn't a great UX. I'd suggest overflow drop down style or expandable filter that takes entire row.

[agg23]

Thank you for the PR. I agree with Pavel; we probably want a dropdown here just like what happens to the TabbedPane when it docks to the side. However, since we do use a dropdown when TabbedPane docks to the side, we need to make sure there's enough visual clarity between the two dropdowns and that it is clear what each represents.

[reyrodrigez]

Yeah, I don't disagree with @pavelfeldman's point. Will update shortly and reach out. Thanks both

[reyrodrigez]

hey @pavelfeldman @agg23 would you guys be happy with this arrangement?

[agg23]

I would make the dropdown styled the same as the tabbed one above (left justify, at least). Also make it as small as possible to still render all of the filter labels without overflow.

Finally, we ideally want to switch to this dropdown form only once the parent block size decreases past a certain point.

[reyrodrigez]

hey @pavelfeldman @agg23 could you take a peek please? Once you're both happy I can clean things up and resubmit the changes.

Screen.Recording.2025-01-25.at.18.36.05.mov

[agg23]

I think that is suitable for now.

[agg23]

We discussed internally and we think it would be better if we had a proper overflow menu. As items move off of the screen, they should be added to a dropdown. Otherwise the options stay as top level buttons.