fix: omit items when quick search items are too long (#1505)

apps/web/src/components/pure/quick-search-modal/Footer.tsx

@@ -27,6 +27,11 @@ export const Footer: React.FC<FooterProps> = ({
   const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
   const { t } = useTranslation();
   const { jumpToPage } = useRouterHelper(router);
+  const MAX_QUERY_SHOW_LENGTH = 20;
+  const normalizedQuery =
+    query.length > MAX_QUERY_SHOW_LENGTH
+      ? query.slice(0, MAX_QUERY_SHOW_LENGTH) + '...'
+      : query;
   return (
     <Command.Item
       data-testid="quick-search-add-new-page"
@@ -52,7 +57,7 @@ export const Footer: React.FC<FooterProps> = ({
       <StyledModalFooterContent>
         <PlusIcon />
         {query ? (
-          <span>{t('New Keyword Page', { query: query })}</span>
+          <span>{t('New Keyword Page', { query: normalizedQuery })}</span>
         ) : (
           <span>{t('New Page')}</span>
         )}

apps/web/src/components/pure/quick-search-modal/style.ts

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@affine/component';
+import { displayFlex, styled, textEllipsis } from '@affine/component';
 
 export const StyledContent = styled('div')(({ theme }) => {
   return {
@@ -150,6 +150,9 @@ export const StyledListItem = styled('button')(({ theme }) => {
     borderRadius: '5px',
     transition: 'background .15s, color .15s',
     ...displayFlex('flex-start', 'center'),
+    span: {
+      ...textEllipsis(1),
+    },
     '>svg': {
       fontSize: '20px',
       marginRight: '12px',