update flex-direction and add order; update inset and padding

Signed-off-by: WaitSpring <me@waitspring.com>

resources/extensions/Echo.less

@@ -41,6 +41,7 @@
 
 	#personal-extra {
 		white-space: nowrap;
+		order: 2;
 
 		ul {
 			padding: 0;
@@ -71,7 +72,7 @@
 
 	@media ( max-width: @mobile-width ) {
 		#personal-extra {
-			.flex(1, 1, auto, 1);
+			.flex(1, 1, auto, 2);
 
 			ul {
 				margin: 0;

resources/screen-desktop.less

@@ -96,10 +96,11 @@ div.mw-notification-area {
 #user-tools {
 	.flex(0, 1, auto, 3);
 	.flex-display;
+	flex-direction: row-reverse;
 	gap: 0.25em;
 	/* For the more responsive user tools support */
 	min-width: @column-right-size - 3.25em * 2;
-	margin: auto 1.75em auto 5.25em;
+	margin: auto 1em auto 6.5em;
 
 	h2 span {
 		display: inline-block;
@@ -113,7 +114,7 @@ div.mw-notification-area {
 #personal {
 	position: relative;
 	display: inline-block;
-	order: 2;
+	order: 1;
 	line-height: 1;
 
 	.dropdown {

resources/screen-mobile.less

@@ -57,7 +57,8 @@
 	margin: 0.125em auto;
 
 	.sidebar-inner {
-		left: 0;
+		left: 1.25em;
+		padding-top: 0.5em;
 		max-width: 100%;
 	}
 }
@@ -68,7 +69,7 @@
 	position: absolute;
 	z-index: 100;
 	top: 2.25em;
-	right: 0;
+	right: 1.25em;
 	display: none;
 	overflow: visible;
 	min-width: 9em;
@@ -130,11 +131,12 @@
 #user-tools {
 	.flex-display;
 	align-items: center;
+	flex-direction: row-reverse;
 	.flex(0, 1, auto, 3);
 	margin-right: 1.25em;
 
 	#personal {
-		.flex(1, 1, auto, 2);
+		.flex(1, 1, auto, 1);
 	}
 }
 
@@ -197,7 +199,7 @@
 
 	.sidebar-inner {
 		right: auto;
-		left: 0;
+		left: 1.25em;
 	}
 }