From d5a91ebc34f0fba86be652d03949c309e824c0fa Mon Sep 17 00:00:00 2001
From: Khokan Sardar <itzmekhokan@gmail.com>
Date: Tue, 18 Aug 2026 23:43:18 +0530
Subject: [PATCH] Customize: Fix visual/DOM order mismatch of Widgets panel
 buttons.

In the Widgets panel, the 'Add a Widget' and 'Reorder' buttons were
floated right, which visually reversed their DOM order and left them
misaligned. Wrap both buttons in a flex container so their DOM order
matches the visual order and they align vertically, consistent with
the Menus panel.

Fixes #65902.
---
 src/wp-admin/css/customize-controls.css          | 11 ++++++++---
 .../class-wp-widget-area-customize-control.php   | 16 +++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 3dfdfea790fb3..a81e5c7e575b9 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -2493,12 +2493,18 @@ body.cheatin p {
  * Widgets and Menus common styles
  */
 
+.customize-control-widgets-buttons {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	gap: 8px;
+}
+
 /* higher specificity than .wp-core-ui .button */
 #customize-theme-controls .add-new-widget,
 #customize-theme-controls .add-new-menu-item {
 	cursor: pointer;
-	float: right;
-	margin: 0 0 0 10px;
+	margin: 0;
 	transition: all 0.2s;
 	-webkit-user-select: none;
 	user-select: none;
@@ -2530,7 +2536,6 @@ body.cheatin p {
 
 /* Reordering */
 .reorder-toggle {
-	float: right;
 	padding: 5px 8px;
 	text-decoration: none;
 	cursor: pointer;
diff --git a/src/wp-includes/customize/class-wp-widget-area-customize-control.php b/src/wp-includes/customize/class-wp-widget-area-customize-control.php
index 66162827bc8a1..bcc27e23ab02d 100644
--- a/src/wp-includes/customize/class-wp-widget-area-customize-control.php
+++ b/src/wp-includes/customize/class-wp-widget-area-customize-control.php
@@ -53,13 +53,15 @@ public function to_json() {
 	public function render_content() {
 		$id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
 		?>
-		<button type="button" class="button add-new-widget" aria-expanded="false" aria-controls="available-widgets">
-			<?php _e( 'Add a Widget' ); ?>
-		</button>
-		<button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
-			<span class="reorder"><?php _e( 'Reorder' ); ?></span>
-			<span class="reorder-done"><?php _e( 'Done' ); ?></span>
-		</button>
+		<div class="customize-control-widgets-buttons">
+			<button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
+				<span class="reorder"><?php _e( 'Reorder' ); ?></span>
+				<span class="reorder-done"><?php _e( 'Done' ); ?></span>
+			</button>
+			<button type="button" class="button add-new-widget" aria-expanded="false" aria-controls="available-widgets">
+				<?php _e( 'Add a Widget' ); ?>
+			</button>
+		</div>
 		<p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>">
 			<?php
 			/* translators: Hidden accessibility text. */