From daa707933866919673ee868fe85b2aeb90a8afc0 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sat, 5 Mar 2022 14:19:44 +0100
Subject: [PATCH] Address search with middle ellipsis mobile fix

---
 .../search-form/search-form.component.scss           | 12 ++++++++++--
 .../components/search-form/search-form.component.ts  |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss
index a2221757f..f316c3aa7 100644
--- a/frontend/src/app/components/search-form/search-form.component.scss
+++ b/frontend/src/app/components/search-form/search-form.component.scss
@@ -1,10 +1,18 @@
 :host ::ng-deep {
   .dropdown-item {
     white-space: nowrap;
-    width: 410px;
+    width: calc(100% - 34px);
   }
   .dropdown-menu {
-    width: 410px;
+    width: calc(100% - 34px);
+  }
+  @media (min-width: 768px) {
+    .dropdown-item {
+      width: 410px;
+    }
+    .dropdown-menu {
+      width: 410px;
+    }
   }
 }
 
diff --git a/frontend/src/app/components/search-form/search-form.component.ts b/frontend/src/app/components/search-form/search-form.component.ts
index be0bead13..d83975c50 100644
--- a/frontend/src/app/components/search-form/search-form.component.ts
+++ b/frontend/src/app/components/search-form/search-form.component.ts
@@ -23,6 +23,7 @@ export class SearchFormComponent implements OnInit {
   typeaheadSearchFn: ((text: Observable<string>) => Observable<readonly any[]>);
 
   searchForm: FormGroup;
+  isMobile = (window.innerWidth <= 767.98);
   @Output() searchTriggered = new EventEmitter();
 
   regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,100}|[A-Z]{2,5}1[AC-HJ-NP-Z02-9]{8,100})$/;
@@ -34,7 +35,7 @@ export class SearchFormComponent implements OnInit {
   focus$ = new Subject<string>();
   click$ = new Subject<string>();
 
-  formatterFn = (address: string) => this.shortenStringPipe.transform(address, 40);
+  formatterFn = (address: string) => this.shortenStringPipe.transform(address, this.isMobile ? 33 : 40);
 
   constructor(
     private formBuilder: FormBuilder,