Switch remaining vb fields according to unit preference

frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.html

@@ -21,10 +21,14 @@
         <td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td>
         <td>{{ rbfInfo.tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span></td>
       </tr>
-      <tr>
+      <tr *only-vsize>
         <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
         <td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize | vbytes: 2)"></td>
       </tr>
+      <tr *only-weight>
+        <td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
+        <td [innerHTML]="'&lrm;' + (rbfInfo.tx.vsize * 4 | vbytes: 2)"></td>
+      </tr>
       <tr>
         <td class="td-width" i18n="transaction.status|Transaction Status">Status</td>
         <td>

frontend/src/app/components/rbf-timeline/rbf-timeline.component.html

@@ -31,7 +31,7 @@
               >
                 <div class="shape"></div>
               </a>
-              <span class="fee-rate"><app-fee-rate [fee]="cell.replacement.tx.fee" [weight]="cell.replacement.tx.vsize * 4"></app-fee-rate></span>
+              <span class="fee-rate"><app-fee-rate [fee]="cell.replacement.tx.fee" [weight]="cell.replacement.tx.vsize * 4" [unitStyle]="{ display: 'block', marginTop: '-0.5em'}"></app-fee-rate></span>
             </div>
           </ng-container>
           <ng-template #nonNode>

frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss

@@ -126,11 +126,6 @@
         }
       }
 
-      .symbol::ng-deep {
-        display: block;
-        margin-top: -0.5em;
-      }
-
       &.selected {
         .shape-border {
           background: #9339f4;