From 1534a02953d084b84a8e19904aca14dd06e28a4c Mon Sep 17 00:00:00 2001
From: qinluhe <qinluhe.twodog@gmail.com>
Date: Wed, 3 Jul 2024 16:42:46 +0800
Subject: [PATCH] fix: title longer

---
 .../blocks/bulleted-list/BulletedListIcon.tsx   | 17 +++++------------
 .../publish/header/BreadcrumbItem.tsx           |  5 ++++-
 .../components/view-meta/ViewMetaPreview.tsx    |  6 ++++--
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx
index 252452495e..3fee74bfad 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/bulleted-list/BulletedListIcon.tsx
@@ -31,31 +31,24 @@ export function BulletedListIcon({ block, className }: { block: BulletedListNode
   const Icon = useMemo(() => {
     switch (letter) {
       case Letter.Disc:
-        return 'disc';
+        return DiscIcon;
       case Letter.Circle:
-        return 'circle';
+        return CircleIcon;
       case Letter.Square:
-        return 'square';
+        return SquareIcon;
     }
   }, [letter]);
 
   return (
-    // <span
-    //   onMouseDown={(e) => {
-    //     e.preventDefault();
-    //   }}
-    //   contentEditable={false}
-    //   className={`${className} bulleted-icon ${dataLetter} flex min-w-[24px] justify-center pr-1 font-medium`}
-    // />
     <span
       data-playwright-selected={false}
       contentEditable={false}
       onMouseDown={(e) => {
         e.preventDefault();
       }}
-      className={`${className} cursor-pointer pr-1 text-xl hover:text-fill-default`}
+      className={`${className} pr-1 text-xl`}
     >
-      {Icon === 'disc' ? <DiscIcon /> : Icon === 'circle' ? <CircleIcon /> : <SquareIcon />}
+      <Icon />
     </span>
   );
 }
diff --git a/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx b/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx
index 880656e194..dd6f740b5b 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/header/BreadcrumbItem.tsx
@@ -63,7 +63,10 @@ function BreadcrumbItem({ crumb, disableClick = false }: { crumb: Crumb; disable
       )}
 
       <span
-        className={!disableClick ? 'max-w-[250px] truncate hover:text-text-title hover:underline' : 'flex-1 truncate'}
+        className={
+          'max-w-[250px] overflow-hidden truncate ' +
+          (!disableClick ? 'hover:text-text-title hover:underline' : 'flex-1')
+        }
       >
         {name || t('menuAppHeader.defaultNewPageName')}
       </span>
diff --git a/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx b/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx
index d0d6cfb877..6c555dd641 100644
--- a/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx
+++ b/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx
@@ -58,12 +58,14 @@ export function ViewMetaPreview({ icon, cover, name }: ViewMetaProps) {
       <div className={`relative mx-16 mb-6 mt-[52px] w-[964px] min-w-0 max-w-full overflow-visible max-md:mx-4`}>
         <div
           className={
-            'flex items-center gap-4 px-16 text-[2.25rem] font-bold leading-[1.5em] max-md:px-4 max-sm:text-[7vw]'
+            'flex gap-4 overflow-hidden whitespace-pre-wrap break-words break-all px-16 text-[2.25rem] font-bold leading-[1.5em] max-md:px-4 max-sm:text-[7vw]'
           }
         >
           {icon?.value ? <div className={'view-icon'}>{icon?.value}</div> : null}
 
-          {name || <span className={'text-text-placeholder'}>{t('menuAppHeader.defaultNewPageName')}</span>}
+          <div className={'relative top-1.5'}>
+            {name || <span className={'text-text-placeholder'}>{t('menuAppHeader.defaultNewPageName')}</span>}
+          </div>
         </div>
       </div>
     </div>