[hkarmoush]

Fixes #10004

On narrow screens (e.g. DevTools embedded in a VS Code side panel, ~330-410px wide) the Network tab's toolbar controls overlapped and the status bar items were clipped past the right edge.

• Toolbar: below MediaSize.xs the controls now stack: record, clear and open/save on the first row, then the search field, then the filter field. Wider screens keep the existing single-row layout.
• Status bar: below MediaSize.xs the video tutorial link is hidden, and the connection status is Flexible so it can shrink. This is in the shared status line, so it applies to every screen, not just Network (the overflow reproduced at 330px even with no app connected).

Added widget tests at 410px and 330px for the Network controls (no overflow, no overlap between search, filter and open/save) and for the status line (no overflow when embedded).

TODO: before/after screenshots

Pre-launch Checklist

General checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read the Flutter Style Guide recently, and have followed its advice.
• I signed the CLA.
• I updated/added relevant documentation (doc comments with ///).

Issues checklist

• I listed at least one issue that this PR fixes in the description above.
• I listed at least one issue which has the contributions-welcome or good-first-issue label.
• I did not list at least one issue with the contributions-welcome or good-first-issue label. I understand this means my PR might take longer to be reviewed.

Tests checklist

• I added new tests to check the change I am making...

Feature-change checklist

• This PR does change the DevTools UI or behavior and...
  • I added an entry to packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md.