Merge remote-tracking branch 'origin/master' into add_tests_for_rbf_txs

frontend/src/app/components/transaction/transaction.component.html

@@ -20,8 +20,6 @@
         <app-clipboard [text]="txId"></app-clipboard>
       </span>
 
-      <span class="grow"></span>
-
       <div class="container-buttons">
         <ng-template [ngIf]="tx?.status?.confirmed">
           <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success">
@@ -196,7 +194,7 @@
       <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
     </div>
 
-    <button type="button" class="btn btn-outline-info btn-sm float-right" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
+    <button type="button" class="btn btn-outline-info details-button btn-sm float-right" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
 
     <div class="clearfix"></div>
 

frontend/src/app/components/transaction/transaction.component.scss

@@ -3,25 +3,11 @@
 }
 
 .container-buttons {
-	text-align: right;
-  align-self: start;
-  width: auto;
-  margin-right: 15px;
-  right: 0;
-  position: absolute;
-	@media (min-width: 650px) {
-    right: auto;
-    margin-right: auto;
-    position: relative;
-  }
-	@media (min-width: 768px) {
-    align-self: center;
-		float: right;
-	}
+  align-self: center;
 }
 
 .title-block {
-  flex-direction: column;
+	flex-wrap: wrap;
   @media (min-width: 650px) {
     flex-direction: row;
   }
@@ -32,6 +18,7 @@
 }
 .tx-link {
   display: flex;
+	flex-grow: 1;
   margin-bottom: 0px;
   margin-top: 8px;
 	@media (min-width: 650px) {
@@ -45,6 +32,9 @@
     top: 1px;
     position: relative;
 	}
+	@media (max-width: 768px) {
+	  order: 3;
+	}
 }
 
 .td-width {
@@ -127,7 +117,6 @@
 	}
 }
 
-
 .title {
   h2 {
     line-height: 1;
@@ -137,7 +126,14 @@
 }
 
 .btn-outline-info {
-  margin-top: -10px;
+	margin-top: 5px;
+	@media (min-width: 768px){
+		margin-top: 0px;
+	}
+}
+
+.details-button {
+  margin-top: -5px;
 	@media (min-width: 768px){
 		display: inline-block;
     margin-top: 0px;