Fix the action with X button on compose form (#7826)

app/javascript/styles/mastodon/components.scss

@@ -4941,8 +4941,8 @@ noscript {
 
   .navigation-bar {
     & > a:first-child {
-      will-change: margin-top, margin-left, width;
-      transition: margin-top $duration $delay, margin-left $duration ($duration + $delay);
+      will-change: margin-top, margin-left, margin-right, width;
+      transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
     }
 
     & > .navigation-bar__profile-edit {
@@ -4975,8 +4975,7 @@ noscript {
       padding-bottom: 0;
 
       & > a:first-child {
-        margin-top: -50px;
-        margin-left: -40px;
+        margin: -100px 10px 0 -50px;
       }
 
       .navigation-bar__profile {
@@ -4985,7 +4984,7 @@ noscript {
 
       .navigation-bar__profile-edit {
         position: absolute;
-        margin-top: -50px;
+        margin-top: -60px;
       }
 
       .navigation-bar__actions {
@@ -4993,6 +4992,7 @@ noscript {
           pointer-events: auto;
           opacity: 1;
           transform: scale(1.0, 1.0) translate(0, 0);
+          bottom: 5px;
         }
 
         .compose__action-bar .icon-button {