Media: Improve layout of image rotation options panel.

Add visual affordance to expanded/collapsed states and move panel under the control rather than placing it next to the toggle, to prevent overflow with the save menu.

Props nithi22, deepakvijayan, antpb, joedolson.
Fixes #58756.

git-svn-id: https://develop.svn.wordpress.org/trunk@56239 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/media.css

@@ -1001,6 +1001,7 @@ border color while dragging a file over the uploader drop area */
 	padding: 0 10px;
 }
 
+.imgedit-menu .button:after,
 .imgedit-menu .button:before {
 	font: normal 16px/1 dashicons;
 	margin-right: 8px;
@@ -1012,6 +1013,16 @@ border color while dragging a file over the uploader drop area */
 	-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,10 +1132,11 @@ border color while dragging a file over the uploader drop area */
 }
 
 .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 {