Fix title styles.

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

@@ -192,15 +192,19 @@
 
     <br>
 
-    <h2 class="float-left" i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
+    <div class="title float-left">
+      <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 mr-1 mt-0 mt-md-2" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
+    <button type="button" class="btn btn-outline-info btn-sm float-right" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
 
     <div class="clearfix"></div>
 
     <app-transactions-list #txList [transactions]="[tx]" [errorUnblinded]="errorUnblinded" [outputIndex]="outputIndex" [transactionPage]="true"></app-transactions-list>
 
-    <h2 class="text-left" i18n="transaction.details">Details</h2>
+    <div class="title">
+      <h2 i18n="transaction.details">Details</h2>
+    </div>
     <div class="box">
       <table class="table table-borderless table-striped">
         <tbody>

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

@@ -21,28 +21,29 @@
 }
 
 .title-block {
-  height: 100px;
   flex-direction: column;
-  h1 {
-    margin-bottom: 0rem;
-  }
-	@media (min-width: 650px) {
-    height: 80px;
+  @media (min-width: 650px) {
     flex-direction: row;
-    h1 {
-      margin-bottom: 1rem;
-    }
-	}
+  }
+  h1 {
+    margin: 0rem;
+    line-height: 1;
+  }
 }
 .tx-link {
   display: flex;
+  margin-bottom: 0px;
+  margin-top: 8px;
 	@media (min-width: 650px) {
-    margin-left: 15px;
     align-self: end;
-    margin-bottom: 9px;
+    margin-left: 15px;
+    margin-top: 0px;
+    margin-bottom: -3px;
 	}
 	@media (min-width: 768px) {
-    margin-bottom: 2px;
+    margin-bottom: 0px;
+    top: 1px;
+    position: relative;
 	}
 }
 
@@ -71,10 +72,6 @@
 	color: #dc3545;
 }
 
-.btn {
-	margin-top: 5px;
-}
-
 .container-xl {
 	margin-bottom: 40px;
 }
@@ -123,9 +120,26 @@
 	}
 }
 
-.effective-fee-container{
+.effective-fee-container {
 	display: block;
 	@media (min-width: 768px){
 		display: inline-block;
 	}
 }
+
+
+.title {
+  h2 {
+    line-height: 1;
+    margin: 0;
+    padding-bottom: 10px;
+  }
+}
+
+.btn-outline-info {
+  margin-top: -10px;
+	@media (min-width: 768px){
+		display: inline-block;
+    margin-top: 0px;
+	}
+}