From 3c365e55dc3cdd9789a129c42f76089f6aaac7ef Mon Sep 17 00:00:00 2001
From: Jb Audras <audrasjb@git.wordpress.org>
Date: Thu, 22 Jun 2023 07:52:24 +0000
Subject: [PATCH] Help/About: Improve Dashboard screen options behavior on
 small screens.

This changeset improve Dashboard screen options by stacking them vertically on small screens.

Props dhrumilk, prashantbhivsane, marybaum, dhruvishah2203, ababir, mukesh27, chiragrathod103, oglekler, tb1909, jahidcse, audrasjb.
Fixes #57977.




git-svn-id: https://develop.svn.wordpress.org/trunk@55984 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css               | 11 +++++++++++
 src/wp-admin/includes/class-wp-screen.php |  2 ++
 2 files changed, 13 insertions(+)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index e97fa1666e..d26d644c55 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -4122,6 +4122,17 @@ img {
 	}
 }
 
+@media screen and (max-width: 480px) {
+	.metabox-prefs-container {
+		display: grid;
+	}
+
+	.metabox-prefs-container > * {
+		display: inline-block;
+		padding: 2px;
+	}
+}
+
 @media screen and (max-width: 320px) {
 	/* Prevent default center alignment and larger font for the Right Now widget when
 	   the network dashboard is viewed on a small mobile device. */
diff --git a/src/wp-admin/includes/class-wp-screen.php b/src/wp-admin/includes/class-wp-screen.php
index d04d9a75b2..1901bc8f25 100644
--- a/src/wp-admin/includes/class-wp-screen.php
+++ b/src/wp-admin/includes/class-wp-screen.php
@@ -1118,6 +1118,7 @@ final class WP_Screen {
 			<?php _e( 'Some screen elements can be shown or hidden by using the checkboxes.' ); ?>
 			<?php _e( 'Expand or collapse the elements by clicking on their headings, and arrange them by dragging their headings or by clicking on the up and down arrows.' ); ?>
 		</p>
+		<div class="metabox-prefs-container">
 		<?php
 
 		meta_box_prefs( $this );
@@ -1137,6 +1138,7 @@ final class WP_Screen {
 			echo _x( 'Welcome', 'Welcome panel' ) . "</label>\n";
 		}
 		?>
+		</div>
 		</fieldset>
 		<?php
 	}