From 7e2b3cfa0e3eb61bb9285a13d321f88b2f61336d Mon Sep 17 00:00:00 2001
From: Ibrahim Riaz <ibrahimriaz.github@gmail.com>
Date: Sat, 11 Oct 2025 00:10:31 +0600
Subject: [PATCH] Administration: Improve drag-and-drop zone for theme/plugin
 uploads

Expands the file input drop zone to cover the entire upload form area,
preventing the browser from downloading files when dropped outside the small input element.

Previously, dragging a ZIP file to upload a theme or plugin would only
work if dropped precisely on the small file input element. Dropping
anywhere else in the form would trigger the browser's default behavior
of opening/downloading the file, creating a confusing user experience.

This change uses a CSS-only solution that:
* Expands the file input with generous padding to cover the form area
* Positions the submit button absolutely on top of the expanded input
* Adds visual hover/focus feedback with WordPress blue theme colors
* Includes full RTL language support
* Provides responsive design for mobile devices

The entire upload form now serves as a valid drop zone, matching user
expectations for modern drag-and-drop interfaces.

Fixes #64065
---
 src/wp-admin/css/themes.css | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 7d4bb848a129a..e736788460a23 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1086,9 +1086,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 
 .upload-theme .wp-upload-form,
 .upload-plugin .wp-upload-form {
-	background: #f6f7f7;
-	border: 1px solid #c3c4c7;
-	padding: 30px;
+	position: relative;
 	margin: 30px auto;
 	display: inline-flex;
 	justify-content: space-between;
@@ -1097,7 +1095,16 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 
 .upload-theme .wp-upload-form input[type="file"],
 .upload-plugin .wp-upload-form input[type="file"] {
-	margin-right: 10px;
+	background: #f6f7f7;
+    border: 1px solid #c3c4c7;
+    margin: 0;
+    padding: 30px 128px 30px 30px;
+}
+
+.upload-plugin .wp-upload-form input[type=submit], 
+.upload-theme .wp-upload-form input[type=submit] {
+	position: absolute;
+	right: 30px;
 }
 
 .upload-theme .install-help,
@@ -2008,12 +2015,15 @@ body.full-overlay-active {
 		padding-bottom: 4px;
 	}
 
-	.upload-theme .wp-upload-form,
-	.upload-plugin .wp-upload-form {
-		display: block;
+	.upload-plugin .wp-upload-form input[type=file], 
+	.upload-theme .wp-upload-form input[type=file] {
+		padding: 30px 30px 80px;
 	}
 
 	:is(.upload-theme, .upload-plugin) .wp-upload-form input[type="submit"] {
-		margin-top: 10px;
+		right: unset;
+		left: 30px;
+    	bottom: 30px;
+		margin: 10px 0 0;
 	}
 }