diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
index a17d40053..2fe32512c 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
@@ -118,7 +118,7 @@ export const BlocksuiteDocEditor = forwardRef<
           specs={specs}
           hasViewport={false}
         />
-        {docPage ? (
+        {docPage && !page.readonly ? (
           <div
             className={styles.docEditorGap}
             onClick={() => {
diff --git a/packages/frontend/core/src/pages/share/share-detail-page.tsx b/packages/frontend/core/src/pages/share/share-detail-page.tsx
index 8ed7594d8..0ade3d994 100644
--- a/packages/frontend/core/src/pages/share/share-detail-page.tsx
+++ b/packages/frontend/core/src/pages/share/share-detail-page.tsx
@@ -28,6 +28,7 @@ import {
   WorkspaceManager,
   WorkspaceScope,
 } from '@toeverything/infra';
+import clsx from 'clsx';
 import { useCallback, useEffect, useState } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
 import {
@@ -214,7 +215,12 @@ export const Component = () => {
                 docCollection={page.blockSuiteDoc.collection}
               />
               <Scrollable.Root>
-                <Scrollable.Viewport className={styles.editorContainer}>
+                <Scrollable.Viewport
+                  className={clsx(
+                    'affine-page-viewport',
+                    styles.editorContainer
+                  )}
+                >
                   <PageDetailEditor
                     isPublic
                     publishMode={publishMode}