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) => Observable); 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(); click$ = new Subject(); - formatterFn = (address: string) => this.shortenStringPipe.transform(address, 40); + formatterFn = (address: string) => this.shortenStringPipe.transform(address, this.isMobile ? 33 : 40); constructor( private formBuilder: FormBuilder,