fix: skip peek on mobile

Signed-off-by: Innei <i@innei.in>
Innei · Jul 3, 2023 · b3f7cc6 · b3f7cc6 · vercel · Jul 3, 2023
1 parent e1b0b57
commit b3f7cc6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
@@ -222,42 +222,47 @@ const Item = memo<{
   const router = useRouter()
   const isMobile = useIsMobile()
   const { present } = useModalStack()
-  const handlePeek = useCallback((e: SyntheticEvent) => {
-    if (item.type === ArticleType.Note) {
-      {
+
+  const handlePeek = useCallback(
+    (e: SyntheticEvent) => {
+      if (isMobile) return
+      if (item.type === ArticleType.Note) {
+        {
+          e.preventDefault()
+          present({
+            clickOutsideToDismiss: true,
+            title: 'Preview',
+            modalClassName: 'flex justify-center',
+            modalContainerClassName: 'flex justify-center',
+            CustomModalComponent: () => (
+              <PeekModal to={item.href}>
+                <NotePreview noteId={parseInt(item.href.split('/').pop()!)} />
+              </PeekModal>
+            ),
+            content: () => null,
+          })
+        }
+      } else if (item.type === ArticleType.Post) {
         e.preventDefault()
+        const splitpath = item.href.split('/')
+        const slug = splitpath.pop()!
+        const category = splitpath.pop()!
         present({
           clickOutsideToDismiss: true,
           title: 'Preview',
           modalClassName: 'flex justify-center',
           modalContainerClassName: 'flex justify-center',
           CustomModalComponent: () => (
             <PeekModal to={item.href}>
-              <NotePreview noteId={parseInt(item.href.split('/').pop()!)} />
+              <PostPreview category={category} slug={slug} />
             </PeekModal>
           ),
           content: () => null,
         })
       }
-    } else if (item.type === ArticleType.Post) {
-      e.preventDefault()
-      const splitpath = item.href.split('/')
-      const slug = splitpath.pop()!
-      const category = splitpath.pop()!
-      present({
-        clickOutsideToDismiss: true,
-        title: 'Preview',
-        modalClassName: 'flex justify-center',
-        modalContainerClassName: 'flex justify-center',
-        CustomModalComponent: () => (
-          <PeekModal to={item.href}>
-            <PostPreview category={category} slug={slug} />
-          </PeekModal>
-        ),
-        content: () => null,
-      })
-    }
-  }, [])
+    },
+    [isMobile],
+  )
   return (
     <li
       key={item.id}

diff --git a/src/components/layout/container/Paper.tsx b/src/components/layout/container/Paper.tsx
@@ -10,6 +10,7 @@ export const Paper: Component<{
         '-m-4 p-[2rem_1rem] md:m-0 lg:p-[30px_45px]',
         'rounded-[0_6px_6px_0] border-neutral-100 shadow-sm dark:border-neutral-800 dark:shadow-[#333] lg:border',
         'note-layout-main',
+        'min-w-0',
         className,
       )}
     >

diff --git a/src/components/widgets/peek/PostPreview.tsx b/src/components/widgets/peek/PostPreview.tsx
@@ -38,7 +38,7 @@ export const PostPreview: FC<PostPreviewProps> = (props) => {
     <CurrentPostDataAtomProvider overrideAtom={overrideAtom}>
       <CurrentPostDataProvider data={data} />
       <Paper>
-        <article className="prose">
+        <article className="prose relative w-full min-w-0">
           <header className="mb-8">
             <h1 className="text-center">
               <Balancer>{data.title}</Balancer>