Use this javascript code to add classes to the .block-editor__typewriter block just following the .editor-styles-wrapper block. Those classes are here to mimick front-end breakpoints because of ineffectiveness of media queries. See https://sebastien-meric.com/gutenberg-responsive-container-queries/ (in french).

editor-container-query.php

<?php
/**
 * Enqueue in editor pages a specific editor-script.js file
 */
function my_theme_editor_container_query() {
    // Load the editor script within Gutenberg.
    wp_enqueue_script( 'my_theme_editor_container_query', get_stylesheet_directory_uri() .'/editor-script.js' );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_editor_container_query' );
?>

editor-script.js

/**
 * Philip Walton implementation of "container queries"
 *
 * Use this javascript code to add classes to the .block-editor__typewriter block just following
 * the .editor-styles-wrapper block. Those classes are here to mimick front-end breakpoints.
 * As .editor-styles-wrapper container replaces front-end body and because of the 2 sidebars
 * (WordPress left menu and Gutenberg right settings sidebar), traditional media queries could
 * be very complicated to use. By using those classes for breakpoints it is much more easier 
 * to simulate front-end sidebars in the back-end editor.
 *
 * Classes and breakpoints :
 *     .small-container class added beyond 1px width
 *     .medium-container class added beyond 992px width
 *     .large-container class added beyond 1170px width
 *
 * @see https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
 */
window.addEventListener(
    "DOMContentLoaded",
    (e) => {
        if("ResizeObserver" in self){
            var ro = new ResizeObserver(function(entries){
                entries.forEach(function(entry){
                    /**
                     * Those breakpoints are theme dependant
                     */
                    var breakpoints = {
                        "small-container" : 1,
                        "medium-container": 992,
                        "large-container" : 1170
                    };
                    Object.keys(breakpoints).forEach(function(breakpoint){
                        var minWidth = breakpoints[breakpoint];
                        entry.contentRect.width >= minWidth
                            ? entry.target.classList.add(breakpoint)
                            : entry.target.classList.remove(breakpoint);
                    });
                });
            });
            ro.observe(document.querySelector(".editor-styles-wrapper>.block-editor__typewriter"));
        }
    }
);

example.css

/* So, this declaration, in the editor-style.css file for example : */

.medium-container .block-editor-block-list__layout {
    /* any css declarations... */
}

/* would now be equivalent to this media query (if there were no sidebars) : */

@media (min-width: 992px){
    .block-editor-block-list__layout {
        /* any css declarations... */
    }
}

/* because the .medium-container class is dynamicaly added when the div.editor-styles-wrapper
 * width is greater than 992px. */

/* Actualy, with both sidebars visible, the equivalent media query would be (min-width: 1186px)
 * and it will be different with a folded WordPress menu and/or without the Gutenberg setting
 * sidebar...
 */