diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css new file mode 100644 index 000000000..8395f2337 --- /dev/null +++ b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css @@ -0,0 +1,11 @@ +.modal { + width: min(calc(100dvw - 48px), 1320px); + overflow: hidden; + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +.sheet { + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx index 4b37264ba..37ab3881b 100644 --- a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx +++ b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx @@ -3,13 +3,14 @@ import { Column, Dialog, Modal, type ModalProps } from '@umami/react-zen'; import { ReplayPlayback } from '@/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayback'; import { useNavigation } from '@/components/hooks'; import { buildPath } from '@/lib/url'; +import styles from './ReplayModal.module.css'; export interface ReplayModalProps extends ModalProps { websiteId: string; replayId?: string; } -export function ReplayModal({ websiteId, replayId, ...props }: ReplayModalProps) { +export function ReplayModal({ websiteId, replayId, className, ...props }: ReplayModalProps) { const { router, query: { replay }, @@ -33,15 +34,16 @@ export function ReplayModal({ websiteId, replayId, ...props }: ReplayModalProps) return ( - - + + {({ close }) => ( {activeReplayId && (