From 5e73f02b43c79280bbfc33124c617d11f0a0e9e2 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Fri, 10 Mar 2023 16:46:36 +0800
Subject: [PATCH] fix: omit items when quick search items are too long (#1505)

---
 apps/web/src/components/pure/quick-search-modal/Footer.tsx | 7 ++++++-
 apps/web/src/components/pure/quick-search-modal/style.ts   | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/pure/quick-search-modal/Footer.tsx b/apps/web/src/components/pure/quick-search-modal/Footer.tsx
index 9a3e75b4e6..fdfd1fe2d2 100644
--- a/apps/web/src/components/pure/quick-search-modal/Footer.tsx
+++ b/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>
         )}
diff --git a/apps/web/src/components/pure/quick-search-modal/style.ts b/apps/web/src/components/pure/quick-search-modal/style.ts
index 4440b05cf1..dfbdd7041e 100644
--- a/apps/web/src/components/pure/quick-search-modal/style.ts
+++ b/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',