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 a0482df56d..d653a597ed 100644
--- a/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx
+++ b/frontend/appflowy_web_app/src/components/view-meta/ViewMetaPreview.tsx
@@ -60,7 +60,11 @@ export function ViewMetaPreview({ icon, cover, name }: ViewMetaProps) {
     <div className={'flex w-full flex-col items-center'}>
       {cover && <ViewCover coverType={coverType} coverValue={coverValue} />}
       <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-sm:text-[7vw]'}>
+        <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]'
+          }
+        >
           <div className={`view-icon`}>{icon?.value}</div>
           {name || <span className={'text-text-placeholder'}>{t('menuAppHeader.defaultNewPageName')}</span>}
         </div>