fixes

mocks/ad/textAd.ts

+export const duck = {
+  ad: {
+    name: 'Hello utia!',
+    description_short: 'Utia is the best! Go with utia! Utia is the best! Go with utia!',
+    thumbnail: 'https://utia.utia',
+    url: 'https://test.url',
+    cta_button: 'Click me!',
+  },
+};

ui/pages/SearchResults.tsx

@@ -2,7 +2,6 @@ import { Box, chakra, Table, Tbody, Tr, Th, Skeleton, Show, Hide } from '@chakra
 import type { FormEvent } from 'react';
 import React from 'react';
 
-import link from 'lib/link/link';
 import SearchResultListItem from 'ui/searchResults/SearchResultListItem';
 import SearchResultTableItem from 'ui/searchResults/SearchResultTableItem';
 import ActionBar from 'ui/shared/ActionBar';
@@ -23,11 +22,7 @@ const SearchResultsPageContent = () => {
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (searchTerm) {
-      const url = link('search_results', undefined, { q: searchTerm });
-      window.location.assign(url);
-    }
-  }, [ searchTerm ]);
+  }, [ ]);
 
   const content = (() => {
     if (isError) {
@@ -88,7 +83,7 @@ const SearchResultsPageContent = () => {
           <chakra.span fontWeight={ 700 }>
             { pagination.page > 1 ? 50 : data.items.length }{ data.next_page_params || pagination.page > 1 ? '+' : '' }
           </chakra.span>
-          <span> matching results for </span>
+          <span> matching result{ data.items.length > 1 || pagination.page > 1 ? 's' : '' } for </span>
                       “<chakra.span fontWeight={ 700 }>{ debouncedSearchTerm }</chakra.span>”
         </Box>
       )

ui/searchResults/SearchResultListItem.tsx

@@ -27,10 +27,10 @@ const SearchResultListItem = ({ data, searchTerm }: Props) => {
         const name = data.name + (data.symbol ? ` (${ data.symbol })` : '');
 
         return (
-          <Flex alignItems="center">
+          <Flex alignItems="flex-start">
             <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name } flexShrink={ 0 }/>
-            <Link ml={ 2 } href={ link('token_index', { hash: data.address }) } fontWeight={ 700 }>
-              <span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
+            <Link ml={ 2 } href={ link('token_index', { hash: data.address }) } fontWeight={ 700 } wordBreak="break-all">
+              <chakra.span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
             </Link>
           </Flex>
         );
@@ -102,7 +102,7 @@ const SearchResultListItem = ({ data, searchTerm }: Props) => {
 
   return (
     <ListItemMobile py={ 3 } fontSize="sm" rowGap={ 2 }>
-      <Flex justifyContent="space-between" w="100%" overflow="hidden">
+      <Flex justifyContent="space-between" w="100%" overflow="hidden" lineHeight={ 6 }>
         { firstRow }
         <Text variant="secondary" ml={ 8 } textTransform="capitalize">{ data.type }</Text>
       </Flex>

ui/searchResults/SearchResultTableItem.tsx

@@ -29,7 +29,7 @@ const SearchResultTableItem = ({ data, searchTerm }: Props) => {
             <Td fontSize="sm">
               <Flex alignItems="center">
                 <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name } flexShrink={ 0 }/>
-                <Link ml={ 2 } href={ link('token_index', { hash: data.address }) } fontWeight={ 700 }>
+                <Link ml={ 2 } href={ link('token_index', { hash: data.address }) } fontWeight={ 700 } wordBreak="break-all">
                   <span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
                 </Link>
               </Flex>

ui/shared/Page/PageTitle.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as textAdMock from 'mocks/ad/textAd';
 import TestApp from 'playwright/TestApp';
 
 import PageTitle from './PageTitle';
 
-const textAdMock = {
-  ad: {
-    name: 'Hello utia!',
-    description_short: 'Utia is the best! Go with utia! Utia is the best! Go with utia!',
-    thumbnail: 'https://utia.utia',
-    url: 'https://test.url',
-    cta_button: 'Click me!',
-  },
-};
-
 test.beforeEach(async({ page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(textAdMock),
+    body: JSON.stringify(textAdMock.duck),
   }));
-  await page.route(textAdMock.ad.thumbnail, (route) => {
+  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
     return route.fulfill({
       status: 200,
       path: './playwright/image_s.jpg',

ui/snippets/searchBar/SearchBar.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as textAdMock from 'mocks/ad/textAd';
 import * as searchMock from 'mocks/search/index';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import SearchBar from './SearchBar';
 
+test.beforeEach(async({ page }) => {
+  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(textAdMock.duck),
+  }));
+  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/image_s.jpg',
+    });
+  });
+});
+
 test('search by name  +@mobile +@dark-mode', async({ mount, page }) => {
   const API_URL = buildApiUrl('search') + '?q=o';
   await page.route(API_URL, (route) => route.fulfill({

ui/snippets/searchBar/SearchBarSuggest.tsx

@@ -7,11 +7,14 @@ import type { SearchResult } from 'types/api/search';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import TextAd from 'ui/shared/ad/TextAd';
 import ContentLoader from 'ui/shared/ContentLoader';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
 
 import SearchBarSuggestItem from './SearchBarSuggestItem';
 
 interface Props {
-  query: UseQueryResult<SearchResult>;
+  query: UseQueryResult<SearchResult> & {
+    pagination: PaginationProps;
+  };
   searchTerm: string;
 }
 
@@ -28,10 +31,11 @@ const SearchBarSuggest = ({ query, searchTerm }: Props) => {
     }
 
     const num = query.data.next_page_params ? '50+' : query.data.items.length;
+    const resultText = query.data.items.length > 1 || query.pagination.page > 1 ? 'results' : 'result';
 
     return (
       <>
-        <Text fontWeight={ 500 } fontSize="sm">Found <Text fontWeight={ 700 } as="span">{ num }</Text> matching results</Text>
+        <Text fontWeight={ 500 } fontSize="sm">Found <Text fontWeight={ 700 } as="span">{ num }</Text> matching { resultText }</Text>
         { query.data.items.map((item, index) => <SearchBarSuggestItem key={ index } data={ item } isMobile={ isMobile } searchTerm={ searchTerm }/>) }
       </>
     );