Changeset 60259

Timestamp:

05/28/2025 12:47:34 AM (16 months ago)

Author:

joedolson

Message:

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.

Props yogeshbhutkar, getsyash, joedolson.
Fixes #63029.

Location:

trunk/src/wp-admin

Files:

• css/revisions.css (modified) (2 diffs)
• includes/revision.php (modified) (1 diff)

trunk/src/wp-admin/css/revisions.css

@@ -573 +573 @@
 }
 
+@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,
@@ -586 +608 @@
         .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;
         }
 

trunk/src/wp-admin/includes/revision.php

@@ -408 +408 @@
                                 <# } #>
                                 <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 ) { #>