Heads up! modal better responsive on narrow screens

[sami.keijonen]

When you open Appearance >> Editor Heads up! modal dialog opens. At the moment modal goes a little bit over the content on narrow screens. See screenshot:

It could have a little CSS love.

[Mirucon]

Here's a patch.

I am not sure this is a good way but at least it works.

[westonruter]

See #31779 where this modal was introduced.

Note, if you dismiss it, an easy way to get it back (and other dismissed pointers) is this WP-CLI command:

wp user meta set admin dismissed_wp_pointers ''

[westonruter]

@Mirucon it looks like there are some issues with indentation in your patch. Tabs should be used instead of spaces.

Also, there is no need to supply a patch for edit.min.css. This is generated automatically by the build process. For more on that, see ​https://make.wordpress.org/core/handbook/tutorials/working-with-patches/#creating-a-patch

[Mirucon]

@westonruter Thanks, fixed!

[helen]

Hi @Mirucon - thanks for the patch. Could you possibly attach screenshots of what you see with your patch? I'm getting odd results where the modal is off the screen or not showing at all, and the toolbar at the top seems to be affected. Additionally, your patch affects other instances of .notification-dialog and associated - the post edit lock (when somebody else is already editing a post and you also head to the editor for that post) and FTP credentials ones come to mind. A solution may need to be specific to this modal since this isn't really a completely thought-out component, with enhancements noted for a later release.

To test the FTP credentials modal, you'll want to use this code snippet in a plugin file and try doing something that involves installation or upgrade, like installing a theme or plugin.

<?php
/**
 * Plugin Name: Force FTP
 * Description: Used to test FTP credentials screen.
 */

add_filter( 'filesystem_method', function() {
	return 'ftpext';
} );

add_filter( 'fs_ftp_connection_types', function() {
	return [
		'ftp'  => __( 'FTP' ),
		'ftps' => __( 'FTPS (SSL)' ),
		'ssh'  => __( 'SSH2' ),
	];
} );

[Mirucon]

Thanks @helen, I've uploaded a new patch! It's been specified the style so that it only applies for the "Heads up!" dialog. And it now doesn't affect to toolbar.

I was not able to represent this issue - odd results where the modal is off the screen or not showing at all. Can you please make a little bit clear on this?

[Mirucon]

What the dialog look like

[Mirucon]

When menu is opened

[helen]

@Mirucon Your patch removes styling from other places that use .notification-dialog - I know it's hard to figure out what gets used where, so in the future I would suggest doing a search for usages of the class so that you test each of those instances. The toolbar problem is that it shouldn't be accessible at all, making compensation for the menu being open unnecessary, for instance.

In the interest of time, I've attached the simplest possible patch as 42111.2.diff​, which also happens to fix the FTP credentials dialog on narrow screens. Some screenshots:

FTP before:

FTP after:

File editor warning after:

[melchoyce]

Looks good, going to commit 👍

[melchoyce]

In 41854:

Improve File Credentials / Code Editor modal responsive styles.

Makes the modal full-width and height.

Props sami.keijonen, Mirucon, helen.
Fixes #42111.