Move edit icon to the left on remote path mappings

Fixes: #6686

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css

@@ -1,23 +1,20 @@
 .remotePathMapping {
   display: flex;
-  align-items: stretch;
+  align-items: left;
   margin-bottom: 10px;
   height: 30px;
   border-bottom: 1px solid $borderColor;
   line-height: 30px;
 }
 
-.host {
+.actions {
-  flex: 0 0 300px;
+  flex: 0 0 25px;
 }
 
-.path {
+.host {
-  flex: 0 0 400px;
+  flex: 1 0 300px;
 }
 
-.actions {
+.path {
-  display: flex;
+  flex: 1 0 400px;
-  justify-content: flex-end;
-  flex: 1 0 auto;
-  padding-right: 10px;
 }

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.js

@@ -66,9 +66,6 @@ class RemotePathMapping extends Component {
           styles.remotePathMapping
         )}
       >
-        <div className={styles.host}>{host}</div>
-        <div className={styles.path}>{remotePath}</div>
-        <div className={styles.path}>{localPath}</div>
 
         <div className={styles.actions}>
           <Link
@@ -78,6 +75,10 @@ class RemotePathMapping extends Component {
           </Link>
         </div>
 
+        <div className={styles.host}>{host}</div>
+        <div className={styles.path}>{remotePath}</div>
+        <div className={styles.path}>{localPath}</div>
+
         <EditRemotePathMappingModalConnector
           id={id}
           isOpen={this.state.isEditRemotePathMappingModalOpen}

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMappings.css

@@ -4,17 +4,19 @@
   font-weight: bold;
 }
 
+.actions {
+  flex: 0 0 25px;
+}
+
 .host {
-  flex: 0 0 300px;
+  flex: 1 0 300px;
 }
 
 .path {
-  flex: 0 0 400px;
+  flex: 1 0 400px;
 }
 
 .addRemotePathMapping {
-  display: flex;
-  justify-content: flex-end;
   padding-right: 10px;
 }