From 65e1496f54326be3371e0005857b3e79b460bde9 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 21 Feb 2026 06:00:21 +0000
Subject: [PATCH] fix chunked-address rtl display

---
 .../chunked-address.component.html            | 49 ++++++-------------
 .../chunked-address.component.scss            | 10 ++--
 .../chunked-address.component.ts              | 11 +----
 3 files changed, 23 insertions(+), 47 deletions(-)

diff --git a/frontend/src/app/shared/components/chunked-address/chunked-address.component.html b/frontend/src/app/shared/components/chunked-address/chunked-address.component.html
index 8040572c2..6f7fdf700 100644
--- a/frontend/src/app/shared/components/chunked-address/chunked-address.component.html
+++ b/frontend/src/app/shared/components/chunked-address/chunked-address.component.html
@@ -1,12 +1,12 @@
 <div class="address" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
   <ng-container *ngIf="link">
     <a [routerLink]="link" [queryParams]="queryParams" class="address-link" [target]="external ? '_blank' : '_self'" [class.disabled]="disabled">
-      <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
+      <ng-container *ngTemplateOutlet="truncated"></ng-container>
     </a>
   </ng-container>
 
   <ng-container *ngIf="!link">
-    <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
+    <ng-container *ngTemplateOutlet="truncated"></ng-container>
   </ng-container>
 
   <app-clipboard
@@ -27,38 +27,21 @@
   <ng-template #plain>{{ chunk.text }}</ng-template>
 </ng-template>
 
-<ng-template #ltrTruncated>
-  <span class="first">
-    <ng-container *ngIf="headChunks.length; else simpleHead">
-      <span *ngFor="let chunk of headChunks" [class.partial]="chunk.text.length < chunkSize"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
-    </ng-container>
-    <ng-template #simpleHead>{{ address.slice(0, -lastChars) }}</ng-template>
-  </span>
-
-  <span class="last">
-    <ng-container *ngIf="tailChunks.length; else simpleTail">
-      <span *ngIf="(address.length - lastChars) % (chunkSize * 2) >= chunkSize" class="hidden"></span>
-      <span *ngFor="let chunk of tailChunks"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
-    </ng-container>
-    <ng-template #simpleTail>{{ address.slice(-lastChars) }}</ng-template>
-  </span>
-
-  <div class="hidden-content">{{ address }}</div>
-</ng-template>
-
-<ng-template #rtlTruncated>
-  <span class="first">
-      <ng-container *ngIf="tailChunks.length; else simpleTailRTL">
-          <span *ngFor="let chunk of tailChunks" [class.partial]="chunk.text.length < chunkSize"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
+<ng-template #truncated>
+  <div class="address-content">
+    <span class="first">
+      <ng-container *ngIf="headChunks.length; else simpleHead">
+        <span *ngFor="let chunk of headChunks" [class.partial]="chunk.text.length < chunkSize"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
       </ng-container>
-      <ng-template #simpleTailRTL>{{ address.slice(-lastChars) }}</ng-template>
-  </span>
-  <span class="last">
-      <ng-container *ngIf="headChunks.length; else simpleHeadRTL">
+      <ng-template #simpleHead>{{ address.slice(0, -lastChars) }}</ng-template>
+    </span>
+    <span class="last">
+      <ng-container *ngIf="tailChunks.length; else simpleTail">
         <span *ngIf="(address.length - lastChars) % (chunkSize * 2) >= chunkSize" class="hidden"></span>
-        <span *ngFor="let chunk of headChunks"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
+        <span *ngFor="let chunk of tailChunks"><ng-container *ngTemplateOutlet="chunkTpl; context: { $implicit: chunk }"></ng-container></span>
       </ng-container>
-      <ng-template #simpleHeadRTL>{{ address.slice(0, -lastChars) }}</ng-template>
-  </span>
-  <div class="hidden-content">{{ address }}</div>
+      <ng-template #simpleTail>{{ address.slice(-lastChars) }}</ng-template>
+    </span>
+    <div class="hidden-content">{{ address }}</div>
+  </div>
 </ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/chunked-address/chunked-address.component.scss b/frontend/src/app/shared/components/chunked-address/chunked-address.component.scss
index 67b5bc9e5..5ee17cea8 100644
--- a/frontend/src/app/shared/components/chunked-address/chunked-address.component.scss
+++ b/frontend/src/app/shared/components/chunked-address/chunked-address.component.scss
@@ -6,17 +6,18 @@
   position: relative;
   font-family: monospace;
 
-  .address-link {
+  .address-link, .address-content {
+    direction: ltr;
     display: flex;
     flex-direction: row;
     align-items: baseline;
     flex-shrink: 1;
     overflow: hidden;
     min-width: 0;
+  }
 
-    &:hover {
-      filter: brightness(0.85);
-    }
+  .address-link:hover {
+    filter: brightness(0.85);
   }
 
   .first {
@@ -34,6 +35,7 @@
   }
 
   .first, .last {
+    direction: ltr;
    > span {
       padding-inline-end: 2px;
       &:nth-child(even) {
diff --git a/frontend/src/app/shared/components/chunked-address/chunked-address.component.ts b/frontend/src/app/shared/components/chunked-address/chunked-address.component.ts
index 26b7758f6..ee3e4eb61 100644
--- a/frontend/src/app/shared/components/chunked-address/chunked-address.component.ts
+++ b/frontend/src/app/shared/components/chunked-address/chunked-address.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy, OnChanges, LOCALE_ID, Inject } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';
 import { AddressMatch } from '@app/shared/address-utils';
 
 interface AddressChunk {
@@ -27,7 +27,6 @@ export class ChunkedAddressComponent implements OnChanges {
   @Input() disabled: boolean = false;
   @Input() showClipboard: boolean = false;
   @Input() chunkSize = 4;
-  rtl: boolean;
 
   headChunks: AddressChunk[] = [];
   tailChunks: AddressChunk[] = [];
@@ -41,14 +40,6 @@ export class ChunkedAddressComponent implements OnChanges {
 
   matchColor: string = 'var(--primary)';
 
-  constructor(
-    @Inject(LOCALE_ID) private locale: string
-  ) {
-    if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
-      this.rtl = true;
-    }
-  }
-
   ngOnChanges(): void {
     if (this.similarity) {
       this.matchColor = this.groupColors[this.similarity.group % (this.groupColors.length)];