BottomSheet with autofocused TextField does not follow the keyboard on Web

Question

I've tried using MediaQuery, isScrollControlled, scroll containers, extra paddings, all from this other question: How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?

But those solutions don't work for the web (for the phone): the bottom sheet either has extra spacing or the text field is going outside of the screen.

I've build a sample app with several tricks applied to the bottom sheet and published it here: https://bottom-sheet-with-multiline-text.vercel.app/

The whole project code is on GitHub: https://github.com/termosa/bottom-sheet-with-multiline-text/blob/master/lib/main.dart

And here is the fixes I've tried to apply to the BottomSheet:

  void openPure(BuildContext context) {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) => Container(
              padding: const EdgeInsets.all(40),
              child: TextField(
                autofocus: autofocus,
                keyboardType: TextInputType.multiline,
                maxLines: null,
              ),
            ));
  }

  void openMediaQuery(BuildContext context) {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) => Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container(
              padding: const EdgeInsets.all(40),
              child: TextField(
                autofocus: autofocus,
                keyboardType: TextInputType.multiline,
                maxLines: null,
              ),
            )));
  }

  void openScroll(BuildContext context) {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) => SingleChildScrollView(
                child: Container(
              padding: const EdgeInsets.all(40),
              child: TextField(
                autofocus: autofocus,
                keyboardType: TextInputType.multiline,
                maxLines: null,
              ),
            )));
  }

  void openScrollControlled(BuildContext context) {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) => SingleChildScrollView(
                child: Container(
              padding: const EdgeInsets.all(40),
              child: TextField(
                autofocus: autofocus,
                keyboardType: TextInputType.multiline,
                maxLines: null,
              ),
            )));
  }

  void openScrollControlledWithMediaQuery(BuildContext context) {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) => SingleChildScrollView(
            child: Padding(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: Container(
                  padding: const EdgeInsets.all(40),
                  child: TextField(
                    autofocus: autofocus,
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                  ),
                ))));
  }

  void openControlledWithMediaQuery(BuildContext context) {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (context) => Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container(
              padding: const EdgeInsets.all(40),
              child: TextField(
                autofocus: autofocus,
                keyboardType: TextInputType.multiline,
                maxLines: null,
              ),
            )));
  }