Refine replay modal sheet styling

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;
+}

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 (
     <Modal
+      {...props}
       placement="bottom"
       offset="80px"
+      className={[styles.modal, className].filter(Boolean).join(' ')}
       isOpen={!!activeReplayId}
       onOpenChange={handleOpenChange}
       isDismissable
-      {...props}
     >
-      <Column height="100%" maxWidth="1320px" style={{ margin: '0 auto' }}>
+      <Column height="100%">
-        <Dialog variant="sheet">
+        <Dialog variant="sheet" className={styles.sheet}>
           {({ close }) => (
             <Column padding="6">
               {activeReplayId && (