From b255f68a8308b9e60c8c2962a1643df0d4804ead Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 18 Sep 2022 20:50:07 +0200
Subject: [PATCH] Allow address label to overflow without pushing UI

fixes #2544
---
 .../address-labels.component.html             | 19 +++++++++++++------
 .../address-labels.component.scss             |  4 ++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/address-labels/address-labels.component.html b/frontend/src/app/components/address-labels/address-labels.component.html
index 353e733ae..dfc6647f4 100644
--- a/frontend/src/app/components/address-labels/address-labels.component.html
+++ b/frontend/src/app/components/address-labels/address-labels.component.html
@@ -1,9 +1,16 @@
-<a *ngIf="channel; else default" [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">
-  <span
-    *ngIf="label"
-    class="badge badge-pill badge-warning"
-  >{{ label }}</span>
-</a>
+<ng-template [ngIf]="channel" [ngIfElse]="default">
+  <div>
+    <div class="badge-positioner">
+      <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">
+        <span 
+          *ngIf="label"
+          class="badge badge-pill badge-warning"
+        >{{ label }}</span>
+      </a>
+    </div>
+    &nbsp;
+  </div>
+</ng-template>
 
 <ng-template #default>
   <span
diff --git a/frontend/src/app/components/address-labels/address-labels.component.scss b/frontend/src/app/components/address-labels/address-labels.component.scss
index 21bc25b85..5556ab3e6 100644
--- a/frontend/src/app/components/address-labels/address-labels.component.scss
+++ b/frontend/src/app/components/address-labels/address-labels.component.scss
@@ -1,3 +1,7 @@
 .badge {
   margin-right: 2px;
 }
+
+.badge-positioner {
+  position: absolute;
+}
\ No newline at end of file