From e6908acb8216fb9949f336e485df6d463b2ab744 Mon Sep 17 00:00:00 2001
From: Mel Choyce <melchoyce@git.wordpress.org>
Date: Fri, 13 Oct 2017 18:38:03 +0000
Subject: [PATCH] Settings: Widen time/day input fields on General Settings
 page, and move the preview onto the next line.

Props desrosj, afercia.
Fixes #41603.


git-svn-id: https://develop.svn.wordpress.org/trunk@41857 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/forms.css       |  2 +-
 src/wp-admin/options-general.php | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index a059fffb36..1292db2cdb 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -1340,7 +1340,7 @@ table.form-table td .updated p {
 	}
 
 	.options-general-php input[type="text"].small-text {
-		max-width: 60px;
+		max-width: 6.25em;
 		margin: 0;
 	}
 }
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 5be7ad99e7..1c91300c04 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -307,8 +307,9 @@ if ( empty($tzstring) ) { // Create a UTC+- zone if no timezone string exists
 	echo '/> <span class="date-time-text date-time-custom-text">' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom date format in the following field' ) . '</span></span></label>' .
 		'<label for="date_format_custom" class="screen-reader-text">' . __( 'Custom date format:' ) . '</label>' .
 		'<input type="text" name="date_format_custom" id="date_format_custom" value="' . esc_attr( get_option( 'date_format' ) ) . '" class="small-text" />' .
-		'<span class="screen-reader-text">' . __( 'example:' ) . ' </span> <span class="example">' . date_i18n( get_option( 'date_format' ) ) . '</span>' .
-		"<span class='spinner'></span>\n";
+		'<br />' .
+		'<p><strong>' . __( 'Preview:' ) . '</strong> <span class="example">' . date_i18n( get_option( 'date_format' ) ) . '</span>' .
+		"<span class='spinner'></span>\n" . '</p>';
 ?>
 	</fieldset>
 </td>
@@ -343,8 +344,9 @@ if ( empty($tzstring) ) { // Create a UTC+- zone if no timezone string exists
 	echo '/> <span class="date-time-text date-time-custom-text">' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom time format in the following field' ) . '</span></span></label>' .
 		'<label for="time_format_custom" class="screen-reader-text">' . __( 'Custom time format:' ) . '</label>' .
 		'<input type="text" name="time_format_custom" id="time_format_custom" value="' . esc_attr( get_option( 'time_format' ) ) . '" class="small-text" />' .
-		'<span class="screen-reader-text">' . __( 'example:' ) . ' </span> <span class="example">' . date_i18n( get_option( 'time_format' ) ) . '</span>' .
-		"<span class='spinner'></span>\n";
+		'<br />' .
+		'<p><strong>' . __( 'Preview:' ) . '</strong> <span class="example">' . date_i18n( get_option( 'time_format' ) ) . '</span>' .
+		"<span class='spinner'></span>\n" . '</p>';
 
 	echo "\t<p class='date-time-doc'>" . __('<a href="https://codex.wordpress.org/Formatting_Date_and_Time">Documentation on date and time formatting</a>.') . "</p>\n";
 ?>