Revisions: Improve revisions layout on mobile viewports.

On small screens, the restore revision button was mostly hidden due to excessive constraints on overflow height. Fix the overflow issue and ensure that restore revision buttons are always usable.

Reviewed by audrasjb.
Merges [60259] to the 6.8 branch.
Props yogeshbhutkar, getsyash, joedolson.
Fixes #63029.



git-svn-id: https://develop.svn.wordpress.org/branches/6.8@60410 602fd350-edb4-49c9-b593-d223f7449a82

Author: audrasjb

src/wp-admin/css/revisions.css

@@ -572,6 +572,28 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 	}
 }
 
+@media screen and (max-width: 600px) {
+	.revisions-meta .author-card:not(.comparing-two-revisions .author-card) {
+		display: flex;
+		flex-direction: column;
+		width: fit-content;
+		gap: 16px;
+	}
+
+	.comparing-two-revisions .revisions-meta .restore-revision {
+		margin-top: 16px;
+	}
+
+	.revisions-controls {
+		padding-top: 0;
+	}
+
+	.revision-toggle-compare-mode {
+		position: relative;
+		padding: 1rem 0;
+	}
+}
+
 @media screen and (max-width: 782px) {
 	#diff-next-revision,
 	#diff-previous-revision {
@@ -585,14 +607,18 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 
 	.revisions-controls,
 	.comparing-two-revisions .revisions-controls {
-		height: 170px;
+		height: fit-content;
 	}
 
 	.revisions-tooltip {
-		bottom: 130px;
+		bottom: 155px;
 		z-index: 2;
 	}
 
+	.comparing-two-revisions .revisions-tooltip {
+		bottom: 200px;
+	}
+
 	.diff-meta {
 		overflow: hidden;
 	}

src/wp-admin/includes/revision.php

@@ -407,41 +407,43 @@ function wp_print_revision_templates() {
 					<strong id="diff-title-to"><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong>
 				<# } #>
 				<div class="author-card<# if ( data.attributes.autosave ) { #> autosave<# } #>">
-					{{{ data.attributes.author.avatar }}}
-					<div class="author-info" id="diff-title-author">
-					<# if ( data.attributes.autosave ) { #>
-						<span class="byline">
-						<?php
-						printf(
-							/* translators: %s: User's display name. */
-							__( 'Autosave by %s' ),
-							'<span class="author-name">{{ data.attributes.author.name }}</span>'
-						);
-						?>
-							</span>
-					<# } else if ( data.attributes.current ) { #>
-						<span class="byline">
-						<?php
-						printf(
-							/* translators: %s: User's display name. */
-							__( 'Current Revision by %s' ),
-							'<span class="author-name">{{ data.attributes.author.name }}</span>'
-						);
-						?>
-							</span>
-					<# } else { #>
-						<span class="byline">
-						<?php
-						printf(
-							/* translators: %s: User's display name. */
-							__( 'Revision by %s' ),
-							'<span class="author-name">{{ data.attributes.author.name }}</span>'
-						);
-						?>
-							</span>
-					<# } #>
-						<span class="time-ago">{{ data.attributes.timeAgo }}</span>
-						<span class="date">({{ data.attributes.dateShort }})</span>
+					<div>
+						{{{ data.attributes.author.avatar }}}
+						<div class="author-info" id="diff-title-author">
+						<# if ( data.attributes.autosave ) { #>
+							<span class="byline">
+							<?php
+							printf(
+								/* translators: %s: User's display name. */
+								__( 'Autosave by %s' ),
+								'<span class="author-name">{{ data.attributes.author.name }}</span>'
+							);
+							?>
+								</span>
+						<# } else if ( data.attributes.current ) { #>
+							<span class="byline">
+							<?php
+							printf(
+								/* translators: %s: User's display name. */
+								__( 'Current Revision by %s' ),
+								'<span class="author-name">{{ data.attributes.author.name }}</span>'
+							);
+							?>
+								</span>
+						<# } else { #>
+							<span class="byline">
+							<?php
+							printf(
+								/* translators: %s: User's display name. */
+								__( 'Revision by %s' ),
+								'<span class="author-name">{{ data.attributes.author.name }}</span>'
+							);
+							?>
+								</span>
+						<# } #>
+							<span class="time-ago">{{ data.attributes.timeAgo }}</span>
+							<span class="date">({{ data.attributes.dateShort }})</span>
+						</div>
 					</div>
 				<# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
 					<input  <?php if ( wp_check_post_lock( $post->ID ) ) { ?>