Fixed styles for desktop snippet highlightig in autocomplete

packages/website/ts/components/docs/search/autocomplete.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
-// import Autocomplete from 'react-autocomplete';
 import Autosuggest from 'react-autosuggest';
 import { Highlight, Snippet } from 'react-instantsearch-dom';
 
@@ -51,7 +50,7 @@ export const CustomAutoComplete: React.FC<AutoCompleteProps> = ({
             <>
                 <Highlight attribute="title" hit={hit} nonHighlightedTagName="h6" />
                 <br />
-                {/* <Snippet attribute="textContent" hit={hit} nonHighlightedTagName="p" /> */}
+                <Snippet attribute="textContent" hit={hit} nonHighlightedTagName="p" tagName="span" />
             </>
         );
     };
@@ -98,8 +97,9 @@ const SectionTitle = styled.p`
     font-size: 12px;
     padding: 7px 10px 5px;
     text-transform: uppercase;
-    position: absolute;
     margin: 30px;
+    position: sticky;
+    top: 0px;
 
     @media (max-width: 800px) {
         margin: 30px 18px;
@@ -190,10 +190,15 @@ const Wrapper = styled.div<Props>`
         }
 
         p {
+            display: inline;
             color: ${colors.textDarkSecondary};
             font-size: var(--smallParagraph);
-            margin-bottom: 0;
-            border: 1px solid orange;
+            font-weight: 300;
+        }
+
+        span {
+            font-size: var(--smallParagraph);
+            font-weight: 400;
         }
     }
 

packages/website/ts/components/docs/search_input.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-// import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete';
 
 import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete';
 
 import algoliasearch from 'algoliasearch/lite';
-// import Autocomplete from 'react-autocomplete';
-import { Configure, connectAutoComplete, Index, InstantSearch, SearchBox } from 'react-instantsearch-dom';
+import { Configure, connectAutoComplete, Index, InstantSearch } from 'react-instantsearch-dom';
 
 const searchClient = algoliasearch('VHMP18K2OO', 'e46d0171577e85fa5418c50b18f80ade');
-// const index = searchClient.initIndex(['0x_tools_test']);
 
 interface ISearchInputProps {
     isHome?: boolean;