From 5cecd9f8a79cb757a1c64383013f9c1462462766 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 15 Jun 2024 20:52:46 +0000
Subject: [PATCH] Address page bigger QR button on mobile

---
 .../src/app/components/address/address.component.html     | 6 +++---
 .../src/app/components/clipboard/clipboard.component.html | 4 ++--
 .../src/app/components/clipboard/clipboard.component.ts   | 8 +++++++-
 .../shared/components/truncate/truncate.component.scss    | 2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 3d6f1b86d..dcff7f6b3 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -3,9 +3,9 @@
     <h1 i18n="shared.address">Address</h1>
     <div class="tx-link">
       <app-truncate [text]="addressString" [lastChars]="8" [link]="['/address/' | relativeUrl, addressString]">
-        <app-clipboard [text]="addressString"></app-clipboard>
-        <span style="position: relative; cursor: pointer" (mouseover)="showQR = true" (mouseout)="showQR = false" (click)="showQR = !showQR">
-          <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
+        <app-clipboard [text]="addressString" [size]="isMobile ? 'large' : 'normal'"></app-clipboard>
+        <span style="position: relative; cursor: pointer" (mouseover)="showQR = true" (mouseout)="showQR = false" (pointerdown)="showQR = true">
+          <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true" [style.font-size]="isMobile ? '18px' : '12px'"></fa-icon>
           <div class="qr-wrapper" [hidden]="!showQR">
             <app-qrcode [size]="200" [data]="addressString"></app-qrcode>
           </div>
diff --git a/frontend/src/app/components/clipboard/clipboard.component.html b/frontend/src/app/components/clipboard/clipboard.component.html
index ec8802634..d23ccdf8c 100644
--- a/frontend/src/app/components/clipboard/clipboard.component.html
+++ b/frontend/src/app/components/clipboard/clipboard.component.html
@@ -1,7 +1,7 @@
 <ng-template [ngIf]="button" [ngIfElse]="btnLink">
   <button #btn [attr.data-clipboard-text]="text" [class]="class" type="button" [disabled]="text === ''">
     <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;top: -2px;left: 1px;">
-      <app-svg-images name="clippy" [width]="size === 'small' ? '10' : '13'" viewBox="0 0 1000 1000"></app-svg-images>
+      <app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
     </span>
   </button>
 </ng-template>
@@ -9,7 +9,7 @@
 <ng-template #btnLink>
   <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
     <button #btn class="btn btn-sm btn-link pt-0 {{ leftPadding ? 'padding' : '' }}" [attr.data-clipboard-text]="text"> 
-      <app-svg-images name="clippy" [width]="size === 'small' ? '10' : '13'" viewBox="0 0 1000 1000"></app-svg-images>
+      <app-svg-images name="clippy" [width]="widths[size]" viewBox="0 0 1000 1000"></app-svg-images>
     </button>
   </span>
 </ng-template>
diff --git a/frontend/src/app/components/clipboard/clipboard.component.ts b/frontend/src/app/components/clipboard/clipboard.component.ts
index 7fbffdca3..6e577d8b3 100644
--- a/frontend/src/app/components/clipboard/clipboard.component.ts
+++ b/frontend/src/app/components/clipboard/clipboard.component.ts
@@ -13,11 +13,17 @@ export class ClipboardComponent implements AfterViewInit {
   @ViewChild('buttonWrapper') buttonWrapper: ElementRef;
   @Input() button = false;
   @Input() class = 'btn btn-secondary ml-1';
-  @Input() size: 'small' | 'normal' = 'normal';
+  @Input() size: 'small' | 'normal' | 'large' = 'normal';
   @Input() text: string;
   @Input() leftPadding = true;
   copiedMessage: string = $localize`:@@clipboard.copied-message:Copied!`;
 
+  widths = {
+    small: '10',
+    normal: '13',
+    large: '18',
+  };
+
   clipboard: any;
 
   constructor() { }
diff --git a/frontend/src/app/shared/components/truncate/truncate.component.scss b/frontend/src/app/shared/components/truncate/truncate.component.scss
index 57f92f719..8c22dd836 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.scss
+++ b/frontend/src/app/shared/components/truncate/truncate.component.scss
@@ -2,7 +2,7 @@
   text-overflow: unset;
   display: flex;
   flex-direction: row;
-  align-items: baseline;
+  align-items: start;
   position: relative;
 
   .truncate-link {