Alternate dom order

src/js/_enqueues/admin/plugin-install.js

@@ -184,6 +184,20 @@ jQuery( function( $ ) {
 		tbWindow.find( '#TB_iframeContent' ).attr( 'title', title );
 	});
 
+	/*
+	 * On the Add Plugins screen, the plugin icon is decorative markup living
+	 * outside the details link (see #64686 and class-wp-plugin-install-list-
+	 * table.php). Forward mouse/touch clicks on the icon to the existing
+	 * title link so clicking the icon still opens the details modal, the same
+	 * as before. Keyboard users are unaffected: they tab directly to the link,
+	 * which the icon (marked aria-hidden) is skipped over.
+	 */
+	$( '.wrap' ).on( 'click', '.plugin-card .plugin-icon', function() {
+		$( this ).closest( '.plugin-card-top' )
+			.find( '.name a.open-plugin-details-modal' )
+			.trigger( 'click' );
+	});
+
 	/* Plugin install related JS */
 	$( '#plugin-information-tabs a' ).on( 'click', function( event ) {
 		var tab = $( this ).attr( 'name' );

src/wp-admin/css/list-tables.css

@@ -1516,6 +1516,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
 	border-radius: 8px;
 	box-sizing: border-box;
 	overflow: hidden;
+	container-type: inline-size; /* ticket #64686 */
 }
 
 @media screen and (min-width: 1600px) {
@@ -1531,9 +1532,17 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
 }
 
 .plugin-card-top {
-	position: relative;
+	display: grid;
+	grid-template-columns: 128px minmax(0, 1fr);
+	grid-template-rows: auto 1fr auto;
+	grid-template-areas:
+		"icon name"
+		"icon desc"
+		"actions actions";
+	column-gap: 20px;
+	row-gap: 4px;
 	padding: 16px;
-	min-height: 135px;
+	flex: 1 1 auto; /* ticket #64686: grow to fill the card so the action row anchors to the same height across cards in a row */
 }
 
 div.action-links,
@@ -1542,29 +1551,41 @@ div.action-links,
 }
 
 .plugin-card h3 {
-	margin: 0 12px 16px 0;
+	margin: 0;
 	font-size: 18px;
 	line-height: 1.3;
 }
 
-.plugin-card .desc {
-	margin-inline: 0;
+.plugin-card .authors {
+	margin: 8px 0;
 }
 
-.plugin-card .name, .plugin-card .desc > p {
-	margin-left: 148px;
+/*
+ * Option A layout (ticket #64686): the icon spans the height of the
+ * title and description via CSS Grid, with the action buttons in a
+ * full-width row underneath. Applied unconditionally (no width
+ * threshold) since the layout doesn't depend on there being room for
+ * buttons beside the title, unlike the previous flex-based design.
+ */
+.plugin-card .plugin-icon {
+	grid-area: icon;
+	align-self: start;
 }
 
-@media (min-width: 1101px) {
-	.plugin-card .name, .plugin-card .desc > p {
-		margin-right: 128px;
-	}
+.plugin-card .name {
+	grid-area: name;
+	min-width: 0;
 }
 
-@media (min-width: 481px) and (max-width: 781px) {
-	.plugin-card .name, .plugin-card .desc > p {
-		margin-right: 128px;
-	}
+.plugin-card .desc {
+	margin-inline: 0;
+	grid-area: desc;
+}
+
+.plugin-card .action-links {
+	grid-area: actions;
+	padding-top: 12px;
+	border-top: 1px solid rgb(0, 0, 0, 0.1);
 }
 
 .plugin-card .column-description {
@@ -1627,22 +1648,22 @@ div.action-links,
 	margin-top: 1em;
 }
 
-.plugin-card .action-links {
-	position: absolute;
-	top: 20px;
-	right: 20px;
-	width: 120px;
-}
-
+/* ticket #64686: wrap naturally so long, translated button labels never overlap */
 .plugin-action-buttons {
-	clear: right;
-	float: right;
-	margin-bottom: 1em;
-	text-align: right;
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px 20px;
 }
 
 .plugin-action-buttons li {
-	margin-bottom: 10px;
+	display: block;
+	margin: 0;
+}
+
+.plugin-action-buttons li .button {
+	margin-right: 0;
 }
 
 .plugin-card-bottom {
@@ -1727,12 +1748,10 @@ div.action-links,
 }
 
 .plugin-card .plugin-icon {
-	position: absolute;
-	top: 20px;
-	left: 20px;
 	width: 128px;
 	height: 128px;
-	margin: 0 20px 20px 0;
+	margin: 0;
+	cursor: pointer; /* ticket #64686 */
 }
 
 .no-plugin-results {
@@ -1773,36 +1792,6 @@ div.action-links,
 -------------------------------------------------------------- */
 
 @media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) {
-	.plugin-card .action-links {
-		position: static;
-		margin-left: 148px;
-		width: auto;
-	}
-
-	.plugin-action-buttons {
-		float: none;
-		margin: 1em 0 0;
-		text-align: left;
-	}
-
-	.plugin-action-buttons li {
-		display: inline-block;
-		vertical-align: middle;
-	}
-
-	.plugin-action-buttons li .button {
-		margin-right: 20px;
-	}
-
-	.plugin-card h3 {
-		margin-right: 24px;
-	}
-
-	.plugin-card .name,
-	.plugin-card .desc {
-		margin-right: 0;
-	}
-
 	.plugin-card .desc p:first-of-type {
 		margin-top: 0;
 	}

src/wp-admin/includes/class-wp-plugin-install-list-table.php

@@ -670,9 +670,9 @@ public function display_rows() {
 					<h3>
 						<a href="<?php echo esc_url( $details_link ); ?>" class="thickbox open-plugin-details-modal">
 						<?php echo $title; ?>
-						<img src="<?php echo esc_url( $plugin_icon_url ); ?>" class="plugin-icon" alt="" />
 						</a>
 					</h3>
+					<p class="authors"><?php echo $author; ?></p>
 				</div>
 				<div class="action-links">
 					<?php
@@ -683,8 +683,17 @@ public function display_rows() {
 				</div>
 				<div class="desc column-description">
 					<p><?php echo $description; ?></p>
-					<p class="authors"><?php echo $author; ?></p>
 				</div>
+				<?php
+				/*
+				 * The icon is decorative and kept out of the details link (and out of
+				 * tab order via aria-hidden) so the heading link remains the single,
+				 * unambiguous way to reach the plugin details for keyboard and screen
+				 * reader users. A click handler in plugin-install.js forwards mouse/
+				 * touch clicks on the icon to that same link. See #64686.
+				 */
+				?>
+				<img src="<?php echo esc_url( $plugin_icon_url ); ?>" class="plugin-icon" alt="" aria-hidden="true" />
 			</div>
 			<?php
 			$dependencies_notice = $this->get_dependencies_notice( $plugin );