fix: skip peek on mobile

Signed-off-by: Innei <i@innei.in>

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}

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,
  )}
  >

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>