Enabling semantics debugger shifts display

[andyhorn]

Description

If I enable the semantics debugger, my widget is pushed to the right by the width of the Widgetbook navbar.

Steps To Reproduce

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:widgetbook/widgetbook.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  RendererBinding.instance.ensureSemantics();
  runApp(const WidgetbookApp());
}

class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      directories: [
        WidgetbookComponent(
          name: 'Example',
          useCases: [
            WidgetbookUseCase(
              name: 'Default',
              builder: (context) => const MyExampleWidget(),
            ),
          ],
        ),
      ],
      appBuilder: (context, child) => MaterialApp(
        showSemanticsDebugger: true,
        debugShowCheckedModeBanner: false,
        home: Scaffold(body: child),
      ),
    );
  }
}

class MyExampleWidget extends StatelessWidget {
  const MyExampleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(width: 400, child: Text('Example'));
  }
}

Expected Behavior

My widget is displayed in the same position, but with the semantics overlay. The navigation bar should not add semantics info that pushes my component off-screen.

Screenshots

[YoussefRaafatNasry]

Hello @andyhorn 👋
Sorry for the late reply, we have been a bit busy releasing new features to Widgetbook Cloud.

Great job adding the details and the reproduction code as well.
My biggest suspect is the ExcludeSemantics widget used here:

widgetbook/packages/widgetbook/lib/src/layout/desktop_layout.dart

Line 36 in f7a9491

ExcludeSemantics(

We will look more into it, but feel free as well to submit a PR to fix this.