Layout bug with Tabify Edit screen and WordPress editor: gap after tab switch

In a closed topic somebody else wrote this:

When switching tabs and then returning to the main editor there is a large gap between the Visual/Text tabs and the edit area. Also, all content in the edit area is missing. This is temporarily corrected when resizing the browser window or scrolling. If I disable “Enable full-height editor and distraction-free functionality” in Screen Options the issue is resolved.

Anyone else with this same problem? Temporary solution (other than disabling the distraction free feature)?

I had the same and it is very annoying.
Hopefully the plugin author will fix this. In the meantime some workarounds:

The cause is an incompatibility of the Tabify Edit Screen plugin with WordPress functionality in wp-includes/editor-expand.js, which is for the full-screen/full-height/distraction free editor functionality.

A few ways to solve it:

1/ Disable ‘distraction-free functionality’ in Screen Options.

2/ Disable this functionality completely, but you also lose full screen writing mode. Put this in functions.php:

add_action('admin_enqueue_scripts', 'remove_admin_script_editorexpand', 100);
function remove_admin_script_editorexpand() {
	wp_dequeue_script('editor-expand');
}

3/ In wp-includes/editor-expand.js is a function called adjust() which is the cause of the gap above the editor. To solve this issue, this adjust() function needs to be triggered on a click of a Tab. You can add some jQuery to the admin area, to trigger this function, which will solve the issue:

First add a js file to the theme and call it adminscript-tabify.js for example:

jQuery(function($) {

     $( ".tabify-tab" ).on("click", function() {
        $(document).trigger('resize.editor-expand');
    });

});

Then call the script in functions.php:

if (is_admin()) {
wp_register_script( 'adminscript-tabify', get_template_directory_uri() . '/{path-to-script}/admin-tabify.js', array(
        'jquery', 'tabify-edit-screen'), 1.0, true );
 wp_enqueue_script( 'adminscript-tabify' );
}

Don’t forget the / before {path-to-script}, and replace {path-to-script} with the path to the script in your theme directory.