nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(modal): stop over-truncating snippets on mobile and wrap long hits (#2907)

Browse source
This commit is contained in:
Divyansh Singh 2026-07-07 19:47:44 +05:30 committed by GitHub
parent 4710d0ca77
commit 9ad6d169fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/docsearch-css/src/modal.css
View file

@ -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;

28
packages/docsearch-react/src/DocSearchModal.tsx
View file

@ -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<InternalDocSearchHit>['status']) => void;
searchClient: ReturnType<typeof useSearchClient>;
indexes: DocSearchIndex[];
snippetLength: React.MutableRefObject<number>;
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 ?? '<mark>',
@ -340,7 +338,6 @@ export function DocSearchModal({
const formElementRef = React.useRef<HTMLDivElement | null>(null);
const dropdownRef = React.useRef<HTMLDivElement | null>(null);
const inputRef = React.useRef<HTMLInputElement | null>(null);
const snippetLength = React.useRef<number>(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);

1
packages/docsearch-react/src/constants.ts
View file

@ -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';