Ticket #58756: 58756-2.diff

src/wp-admin/css/media.css

@@ -899 +899 @@
 }
 
 .imgedit-panel-content {
-        display: grid;
-        grid-template-columns: 1fr;
+        display: flex;
+        flex-wrap: wrap;
         gap: 20px;
+        margin-bottom: 20px;
 }
 
-@media screen and (min-width: 1200px) {
-        .imgedit-panel-content.imgedit-panel-tools {
-                grid-template-columns: 50% 50%;
-        }
-}
-
 .imgedit-settings {
         max-width: 400px; /* Prevent reflow when help info is expanded. */
 }
@@ -1001 +996 @@
         padding: 0 10px;
 }
 
+.imgedit-menu .button:after,
 .imgedit-menu .button:before {
         font: normal 16px/1 dashicons;
         margin-right: 8px;
@@ -1012 +1008 @@
         -moz-osx-font-smoothing: grayscale;
 }
 
+.imgedit-menu .imgedit-rotate.button:after {
+        content: '\f140';
+        margin-left: 2px;
+        margin-right: 0;
+}
+
+.imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
+        content: '\f142';
+}
+
 .imgedit-menu .button.disabled {
         color: #a7aaad;
         border-color: #dcdcde;
@@ -1121 +1127 @@
 }
 
 .imgedit-popup-menu {
-        width: fit-content;
+        width: calc( 100% - 20px );
         position: absolute;
-        left: calc( 100% + 4px );
-        top: -3px;
+        background: #fff;
+        padding: 10px;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 }
 
 .image-editor .imgedit-menu .imgedit-popup-menu button {