From 0130db32acd10f70d17b4a5b936d6dfaaff1557f Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@umami.is>
Date: Mon, 15 Jun 2026 20:14:53 -0700
Subject: [PATCH] Refine replay modal sheet styling

---
 .../[websiteId]/replays/ReplayModal.module.css        | 11 +++++++++++
 .../websites/[websiteId]/replays/ReplayModal.tsx      | 10 ++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css

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 (
     <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' }}>
-        <Dialog variant="sheet">
+      <Column height="100%">
+        <Dialog variant="sheet" className={styles.sheet}>
           {({ close }) => (
             <Column padding="6">
               {activeReplayId && (