migrate old text truncation implementations to new component

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

@@ -19,22 +19,33 @@
   }
 }
 .tx-link {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: baseline;
+  width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  margin-right: 0px;
   margin-bottom: 0px;
   margin-top: 8px;
-  display: inline-block;
-  width: 100%;
-  flex-shrink: 0;
   @media (min-width: 651px) {
-    display: flex;
-    width: auto;
     flex-grow: 1;
     margin-bottom: 0px;
+    margin-right: 1em;
     top: 1px;
     position: relative;
   }
   @media (max-width: 650px) {
+    width: 100%;
     order: 3;
   }
+
+  .txid {
+    width: 200px;
+    min-width: 200px;
+    flex-grow: 1;
+  }
 }
 
 .td-width {
@@ -188,4 +199,10 @@
       margin-left: 8px;
     }
   }
+}
+
+.cpfp-details {
+  .txids {
+    width: 60%;
+  }
 }