diff --git a/packages/docsearch-css/src/modal.css b/packages/docsearch-css/src/modal.css index 00758d0da..3193bdbf6 100644 --- a/packages/docsearch-css/src/modal.css +++ b/packages/docsearch-css/src/modal.css @@ -1366,10 +1366,18 @@ assistive tech users */ .DocSearch-Hit-content-wrapper { display: flex; + overflow-wrap: break-word; position: relative; + white-space: normal; width: 80%; } + .DocSearch-Hit-Container { + height: auto; + min-height: var(--docsearch-hit-height); + padding-block: 8px; + } + .DocSearch-Modal { border-radius: 0; box-shadow: none; diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx index 69345c679..957b5d518 100644 --- a/packages/docsearch-react/src/DocSearchModal.tsx +++ b/packages/docsearch-react/src/DocSearchModal.tsx @@ -10,7 +10,7 @@ import type { ChatRequestOptions } from 'ai'; import type { SearchResponse } from 'algoliasearch/lite'; import React, { type JSX } from 'react'; -import { MAX_QUERY_SIZE } from './constants'; +import { MAX_QUERY_SIZE, SNIPPET_LENGTH } from './constants'; import type { DocSearchIndex, DocSearchProps } from './DocSearch'; import type { FooterTranslations } from './Footer'; import { Footer } from './Footer'; @@ -129,7 +129,6 @@ const buildQuerySources = async ({ setStatus, searchClient, indexes: indices, - snippetLength, insights, appId, apiKey, @@ -144,7 +143,6 @@ const buildQuerySources = async ({ setStatus: (status: DocSearchState['status']) => void; searchClient: ReturnType; indexes: DocSearchIndex[]; - snippetLength: React.MutableRefObject; insights: boolean; appId?: string; apiKey?: string; @@ -177,13 +175,13 @@ const buildQuerySources = async ({ 'url', ], attributesToSnippet: searchParams?.attributesToSnippet ?? [ - `hierarchy.lvl1:${snippetLength.current}`, - `hierarchy.lvl2:${snippetLength.current}`, - `hierarchy.lvl3:${snippetLength.current}`, - `hierarchy.lvl4:${snippetLength.current}`, - `hierarchy.lvl5:${snippetLength.current}`, - `hierarchy.lvl6:${snippetLength.current}`, - `content:${snippetLength.current}`, + `hierarchy.lvl1:${SNIPPET_LENGTH}`, + `hierarchy.lvl2:${SNIPPET_LENGTH}`, + `hierarchy.lvl3:${SNIPPET_LENGTH}`, + `hierarchy.lvl4:${SNIPPET_LENGTH}`, + `hierarchy.lvl5:${SNIPPET_LENGTH}`, + `hierarchy.lvl6:${SNIPPET_LENGTH}`, + `content:${SNIPPET_LENGTH}`, ], snippetEllipsisText: searchParams?.snippetEllipsisText ?? '…', highlightPreTag: searchParams?.highlightPreTag ?? '', @@ -340,7 +338,6 @@ export function DocSearchModal({ const formElementRef = React.useRef(null); const dropdownRef = React.useRef(null); const inputRef = React.useRef(null); - const snippetLength = React.useRef(15); const initialQueryFromSelection = React.useRef( typeof window !== 'undefined' ? window.getSelection()!.toString().slice(0, MAX_QUERY_SIZE) : '', ).current; @@ -677,7 +674,6 @@ export function DocSearchModal({ setStatus, searchClient, indexes, - snippetLength, insights: Boolean(insights), appId, apiKey, @@ -777,14 +773,6 @@ export function DocSearchModal({ }; }, []); - React.useEffect(() => { - const isMobileMediaQuery = window.matchMedia('(max-width: 768px)'); - - if (isMobileMediaQuery.matches) { - snippetLength.current = 5; - } - }, []); - React.useEffect(() => { if (dropdownRef.current && !isAskAiActive) { scrollToUtils(dropdownRef.current); diff --git a/packages/docsearch-react/src/constants.ts b/packages/docsearch-react/src/constants.ts index 00feb8ff6..2f57fc55d 100644 --- a/packages/docsearch-react/src/constants.ts +++ b/packages/docsearch-react/src/constants.ts @@ -1,4 +1,5 @@ export const MAX_QUERY_SIZE = 512; +export const SNIPPET_LENGTH = 15; export const ASK_AI_API_URL = 'https://askai.algolia.com/chat'; export const BETA_ASK_AI_API_URL = 'https://beta-chat-askai.algolia.com'; export const SUGGESTED_QUETIONS_INDEX_NAME = 'algolia_ask_ai_suggested_questions';