Fix miscellaneous RTL layout bugs

frontend/src/app/lightning/channel/channel.component.scss

@@ -78,5 +78,5 @@ h3 {
 
 .details-button {
   align-self: center;
-  margin-left: auto;
+  margin-inline-start: auto;
 }

frontend/src/app/lightning/channels-list/channels-list.component.scss

@@ -19,6 +19,14 @@
   }
 }
 
+:host-context(.rtl-layout) .formRadioGroup {
+  direction: ltr;
+  @media (min-width: 435px) {
+    right: unset;
+    left: 0;
+  }
+}
+
 .btn-group {
   @media (max-width: 435px) {
     flex-grow: 1;

frontend/src/app/lightning/group/group.component.html

@@ -92,7 +92,7 @@
               </ng-template>
               <input type="text" class="form-control" aria-label="Text input with dropdown button"
                 [value]="node.socketsObject[selectedSocketIndex].socket">
-              <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible[i] = 1"
+              <button class="btn btn-secondary" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible[i] = 1"
                 (mouseout)="qrCodeVisible[i] = 0">
                 <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
                 <div class="qr-wrapper" [hidden]="!qrCodeVisible[i]">

frontend/src/app/lightning/group/group.component.scss

@@ -8,7 +8,7 @@
 }
 
 h1 {
-  margin-left: 15px;
+  margin-inline-start: 15px;
 }
 
 .qr-wrapper {
@@ -57,3 +57,17 @@ h1 {
 .description-text {
   white-space: break-spaces;
 }
+
+.timestamp-first .input-group {
+  input {
+    margin-inline-end: .25rem;
+  }
+}
+
+:host-context(.rtl-layout) {
+  .timestamp-first .input-group {
+    button {
+      margin-inline-end: .25rem;
+    }
+  }
+}

frontend/src/app/lightning/node/node.component.html

@@ -57,7 +57,7 @@
             </tr>
             <tr *ngIf="(avgChannelDistance$ | async) as avgDistance;">
               <td i18n="lightning.avg-distance" class="text-truncate">Avg channel distance</td>
-              <td>{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
+              <td class="direction-ltr">{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
             </tr>
           </tbody>
         </table>

frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss

@@ -53,31 +53,6 @@
   height: 145px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .pool-distribution {
   min-height: 56px;
   display: block;

frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss

@@ -34,31 +34,6 @@
   }
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .bottom-padding {
   @media (max-width: 992px) {
     padding-bottom: 65px

frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss

@@ -53,31 +53,6 @@
   height: 145px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .pool-distribution {
   min-height: 56px;
   display: block;