Fix RenderFlex overflow in debugging controls at narrow widths

[theprantadutta]

Fixes #4917

The debugging controls already drop their button labels below DebuggingControls.minWidth, but there is no strategy left once the icon-only content itself does not fit, so the controls Row overflows. The 2022 report was at a wider width; the small-mode work since then fixed the common case but not the narrow one.

I measured the current threshold by pumping DebuggingControls through the repo's test harness at descending window widths on master:

Window width	Before	After
1200 px	no overflow	no overflow
800 px	no overflow	no overflow
600 px	overflowed by 29 px	no overflow
500 px	overflowed by 129 px	no overflow
400 px	overflowed by 229 px	no overflow

So it starts at roughly 630px, which is realistic for DevTools embedded in an IDE side panel.

The change

The controls now scroll horizontally instead of overflowing, so every control stays reachable at any width rather than being clipped behind an overflow error. The file explorer button stays pinned outside the scroll view so it does not scroll out of reach, which keeps the wide layout visually unchanged.

In #4917 @kenzieschmoll suggested merging the pause/resume buttons, densifying the stepping group, or shrinking the exceptions dropdown font. I went with scrolling because it is the least invasive of the options I proposed on the issue and it holds at any width rather than buying back a fixed number of pixels — but I'm happy to switch to a denser layout, or combine the two, if you'd prefer that direction.

Before / after at 500px

Before:

After:

These are widget-test captures rather than app screenshots, so text renders as solid bars in the test font — the relevant part is the overflow striping on the right edge in the "before" image, and the file explorer button being visible and pinned in the "after" image.

Tests

Added debugger_controls_overflow_test.dart, which pumps the controls at each of the widths above and asserts no exception, plus one test pinning the file explorer button to the right edge so the wide layout does not silently regress. I confirmed the test fails on the three narrow widths without the fix and passes with it.

test/screens/debugger/ and scaffold_debugging_controls_test.dart otherwise pass. One unrelated pre-existing failure in debugger_evaluation_test.dart ("EvalOnDartLibrary returns no operators for int") reproduces on a clean master checkout without my change.

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...
• OR there is a reason for not adding tests, which I explained in the PR description.

AI-tooling checklist

• I did not use any AI tooling in creating this PR.
• OR I did use AI tooling, and...
  • I read the AI contributions guidelines and agree to follow them.
  • I reviewed all AI-generated code before opening this PR.
  • I understand and am able to discuss the code in this PR.
  • I have verifed the accuracy of any AI-generated text included in the PR description.
  • I commit to verifying the accuracy of any AI-generated code or text that I upload in response to review comments.

Feature-change checklist

• This PR does not change the DevTools UI or behavior and...
  • I added the release-notes-not-required label or left a comment requesting the label be added.
• OR this PR does change the DevTools UI or behavior and...
  • I added an entry to packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md.
  • I included before/after screenshots and/or a GIF demo of the new UI to my PR description.
  • I ran the DevTools app locally to manually verify my changes.

On that last box: I verified this through widget tests and the rendered captures above rather than by running the DevTools app against a live VM service, so I've left it unchecked rather than tick something I didn't do. If you'd like a manual pass against a running app before this lands, say the word and I'll do that.

[gemini-code-assist]

Code Review

This pull request introduces horizontal scrolling to the debugging controls in the debugger screen to prevent layout overflow on narrow screens, such as when DevTools is embedded in an IDE side panel. It also adds a corresponding release note and a new test suite to verify the layout behavior at various widths. The review feedback suggests moving the initialization of stateful mocks, controllers, and global services in the new test file into a setUp block to avoid potential test pollution and flakiness.

[gemini-code-assist]

[CONCERN] Stateful mocks, controllers, and global services should be initialized inside a setUp block rather than at the top level of main(). When initialized at the top level of main(), they are shared across all tests in the file, which can lead to test pollution, side effects, and flakiness if one test modifies their state.

  late FakeServiceConnectionManager fakeServiceConnection;
  late MockScriptManager scriptManager;
  late MockDebuggerController debuggerController;

  setUp(() {
    fakeServiceConnection = FakeServiceConnectionManager();
    scriptManager = MockScriptManager();
    mockConnectedApp(fakeServiceConnection.serviceManager.connectedApp!);
    setGlobal(ServiceConnectionManager, fakeServiceConnection);
    setGlobal(IdeTheme, IdeTheme());
    setGlobal(ScriptManager, scriptManager);
    setGlobal(NotificationService, NotificationService());
    setGlobal(BreakpointManager, BreakpointManager());
    setGlobal(
      DevToolsEnvironmentParameters,
      ExternalDevToolsEnvironmentParameters(),
    );
    setGlobal(PreferencesController, PreferencesController());
    fakeServiceConnection.consoleService.ensureServiceInitialized();
    when(
      fakeServiceConnection.errorBadgeManager.errorCountNotifier('debugger'),
    ).thenReturn(ValueNotifier<int>(0));
    debuggerController = createMockDebuggerControllerWithDefaults();
  });

References

1. Categorize Severity: Prefix every comment with a severity: [CONCERN] for maintainability issues. ^(link)