From 6f0a5c9b44a432f04fae2f9c92447fc0d1aaf1ab Mon Sep 17 00:00:00 2001
From: TechMiX <mytechmix@gmail.com>
Date: Sat, 3 Aug 2024 14:39:50 +0200
Subject: [PATCH] fix: accelerationn rtl layout issues

---
 .../block-filters.component.html              |  2 +-
 .../block-filters.component.scss              |  1 -
 frontend/src/styles.scss                      | 22 +++++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/block-filters/block-filters.component.html b/frontend/src/app/components/block-filters/block-filters.component.html
index 2a22681d6..6337dd019 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.html
+++ b/frontend/src/app/components/block-filters/block-filters.component.html
@@ -1,5 +1,5 @@
 <div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.any-mode]="filterMode === 'or'" [class.menu-open]="menuOpen" [class.small]="cssWidth < 500" [class.vsmall]="cssWidth < 400" [class.tiny]="cssWidth < 200">
-  <a *ngIf="menuOpen" [routerLink]="['/docs/faq' | relativeUrl]" fragment="how-do-mempool-goggles-work" class="info-badges" i18n-ngbTooltip="Mempool Goggles&trade; tooltip" ngbTooltip="select filter categories to highlight matching transactions">
+  <a *ngIf="menuOpen" [routerLink]="['/docs/faq' | relativeUrl]" fragment="how-do-mempool-goggles-work" class="info-badges float-right" i18n-ngbTooltip="Mempool Goggles&trade; tooltip" ngbTooltip="select filter categories to highlight matching transactions">
     <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span>
     <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="lg"></fa-icon>
   </a>
diff --git a/frontend/src/app/components/block-filters/block-filters.component.scss b/frontend/src/app/components/block-filters/block-filters.component.scss
index 7cbc738b7..4312dd7b2 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.scss
+++ b/frontend/src/app/components/block-filters/block-filters.component.scss
@@ -24,7 +24,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    float: right;
 
     &:hover, &:active {
       text-decoration: none;
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index e7cf26ab2..98b89918e 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -974,6 +974,28 @@ th {
     }
   }
 
+  .tracker-bar {
+    @extend .tracker-bar;
+    direction: ltr;
+  }
+
+  .confirmations {
+    @extend .confirmations;
+    margin-left: 0 !important;
+    margin-right: 1em;
+  }
+
+  .acceleration-tooltip {
+    @extend .acceleration-tooltip;
+    direction: rtl;
+    text-align: right !important;
+
+    .value {
+      @extend .value;
+      text-align: start !important;
+    }
+  }
+
   .table th {
     text-align: right;
   }