diff --git a/src/app/notes/[id]/pageExtra.tsx b/src/app/notes/[id]/pageExtra.tsx
index 83dab4ac7f..3a6f3c54bd 100644
--- a/src/app/notes/[id]/pageExtra.tsx
+++ b/src/app/notes/[id]/pageExtra.tsx
@@ -3,7 +3,6 @@
'use client'
import { useEffect } from 'react'
-import Balancer from 'react-wrap-balancer'
import clsx from 'clsx'
import dayjs from 'dayjs'
import type { Image } from '@mx-space/api-client'
@@ -25,9 +24,7 @@ export const NoteTitle = () => {
const title = useCurrentNoteDataSelector((data) => data?.data.title)
if (!title) return null
return (
-
- {title}
-
+ {title}
)
}
diff --git a/src/components/ui/image/ZoomedImage.tsx b/src/components/ui/image/ZoomedImage.tsx
index b9dd88ce74..4498840cfe 100644
--- a/src/components/ui/image/ZoomedImage.tsx
+++ b/src/components/ui/image/ZoomedImage.tsx
@@ -98,13 +98,24 @@ export const ImageLazy: Component = ({
}, [zoom, zoomer_, imageLoadStatus])
return (
-
-
+
+
+
+ {!!figcaption && (
+
+
+ {figcaption}
+
+ )}
+
)
}
diff --git a/src/components/widgets/peek/PeekLink.tsx b/src/components/widgets/peek/PeekLink.tsx
index eb8f8662fb..41fa1d4b44 100644
--- a/src/components/widgets/peek/PeekLink.tsx
+++ b/src/components/widgets/peek/PeekLink.tsx
@@ -15,6 +15,12 @@ export const usePeek = () => {
return useCallback(
(href: string) => {
if (isMobile) return
+ const basePresentProps = {
+ clickOutsideToDismiss: true,
+ title: 'Preview',
+ modalClassName:
+ 'relative mx-auto mt-[10vh] scrollbar-none max-w-full overflow-auto px-2 lg:max-w-[65rem] lg:p-0',
+ }
if (href.startsWith('/notes/')) {
requestAnimationFrame(async () => {
@@ -22,10 +28,7 @@ export const usePeek = () => {
(module) => module.NotePreview,
)
present({
- clickOutsideToDismiss: true,
- title: 'Preview',
- modalClassName: 'flex justify-center',
- modalContainerClassName: 'flex justify-center',
+ ...basePresentProps,
CustomModalComponent: () => (
@@ -45,10 +48,7 @@ export const usePeek = () => {
const slug = splitpath.pop()!
const category = splitpath.pop()!
present({
- clickOutsideToDismiss: true,
- title: 'Preview',
- modalClassName: 'flex justify-center',
- modalContainerClassName: 'flex justify-center',
+ ...basePresentProps,
CustomModalComponent: () => (
diff --git a/src/components/widgets/peek/PeekModal.tsx b/src/components/widgets/peek/PeekModal.tsx
index 8b896e324f..1dee4aab62 100644
--- a/src/components/widgets/peek/PeekModal.tsx
+++ b/src/components/widgets/peek/PeekModal.tsx
@@ -10,25 +10,44 @@ export const PeekModal = (
to: string
}>,
) => {
- const { dismissAll } = useModalStack()
+ const { dismissAll, dismissTop } = useModalStack()
+
return (
-
- {props.children}
+
+
+ {props.children}
+
-
-
- Go to this link
-
-
+
+
+ Go to this link
+
+
+
+
+
)
}
diff --git a/src/styles/tailwindcss.css b/src/styles/tailwindcss.css
index d47ef9049b..3b6e3bcdf0 100644
--- a/src/styles/tailwindcss.css
+++ b/src/styles/tailwindcss.css
@@ -61,3 +61,10 @@ input,
textarea {
font-size: 16px;
}
+
+@layer components {
+ .scrollbar-none::-webkit-scrollbar {
+ width: 0 !important;
+ height: 0 !important;
+ }
+}