From 7a19da560e6d782e7910b9ceeefb9e3d1b0f0e16 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 16 Dec 2021 04:49:24 +0400
Subject: [PATCH] UX: Fixing overflowing unconfidential Liquid address

fixes #1013
---
 frontend/src/app/components/address/address.component.html   | 5 ++++-
 .../src/app/components/clipboard/clipboard.component.scss    | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 9d02cf124..c61680ff4 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -21,7 +21,10 @@
             <tbody>
               <tr *ngIf="addressInfo && addressInfo.unconfidential">
                 <td i18n="address.unconfidential">Unconfidential</td>
-                <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">{{ addressInfo.unconfidential }}</a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></td>
+                <td><a [routerLink]="['/address/' | relativeUrl, addressInfo.unconfidential]">
+                  <span class="d-inline d-lg-none">{{ addressInfo.unconfidential | shortenString : 14 }}</span>
+                  <span class="d-none d-lg-inline">{{ addressInfo.unconfidential }}</span>
+                </a> <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard></td>
               </tr>
               <ng-template [ngIf]="!address.electrum">
                 <tr>
diff --git a/frontend/src/app/components/clipboard/clipboard.component.scss b/frontend/src/app/components/clipboard/clipboard.component.scss
index e69de29bb..9483fef52 100644
--- a/frontend/src/app/components/clipboard/clipboard.component.scss
+++ b/frontend/src/app/components/clipboard/clipboard.component.scss
@@ -0,0 +1,3 @@
+.btn-link {
+  padding: 0.25rem 0 0.1rem 0.5rem;
+}