From 928c0c7ea12205e85040e242899a54cb543b739d Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 3 Aug 2026 11:45:19 -0700
Subject: [PATCH] Use full-height modals for session profiles

---
 .../[websiteId]/sessions/SessionModal.module.css   |  1 +
 .../websites/[websiteId]/sessions/SessionModal.tsx | 12 +++++-------
 .../[websiteId]/sessions/SessionProfileModal.tsx   | 14 ++++----------
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionModal.module.css b/src/app/(main)/websites/[websiteId]/sessions/SessionModal.module.css
index 64d64e6e4..57e054cdf 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionModal.module.css
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionModal.module.css
@@ -1,3 +1,4 @@
 .modal {
   width: min(calc(100dvw - 48px), 1320px);
+  height: calc(100dvh - 80px);
 }
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx
index 83d87b7c4..363d7c3bb 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx
@@ -1,11 +1,11 @@
 'use client';
-import { Column, Dialog, Sheet, type SheetProps } from '@umami/react-zen';
+import { Column, Dialog, Modal, type ModalProps } from '@umami/react-zen';
 import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
 import { ControlledDialog } from '@/components/common/ControlledDialog';
 import { useNavigation } from '@/components/hooks';
 import styles from './SessionModal.module.css';
 
-export interface SessionModalProps extends SheetProps {
+export interface SessionModalProps extends ModalProps {
   websiteId: string;
 }
 
@@ -25,16 +25,14 @@ export function SessionModal({ websiteId, className, ...props }: SessionModalPro
 
   return (
     <ControlledDialog>
-      <Sheet
-        side="bottom"
-        size="calc(100dvh - 80px)"
+      <Modal
         className={[styles.modal, className].filter(Boolean).join(' ')}
         isOpen={!!session}
         onOpenChange={handleOpenChange}
         {...props}
       >
         <Column height="100%">
-          <Dialog className="rounded-lg">
+          <Dialog className="h-full rounded-lg">
             {({ close }) => (
               <Column padding="10">
                 <SessionProfile
@@ -47,7 +45,7 @@ export function SessionModal({ websiteId, className, ...props }: SessionModalPro
             )}
           </Dialog>
         </Column>
-      </Sheet>
+      </Modal>
     </ControlledDialog>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx
index b2f74db2d..38754ff79 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Column, Dialog, Sheet } from '@umami/react-zen';
+import { Column, Dialog, Modal } from '@umami/react-zen';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { ControlledDialog } from '@/components/common/ControlledDialog';
 import { buildPath } from '@/lib/url';
@@ -31,21 +31,15 @@ export function SessionProfileModal({
 
   return (
     <ControlledDialog>
-      <Sheet
-        side="bottom"
-        size="calc(100dvh - 80px)"
-        className={styles.modal}
-        isOpen
-        onOpenChange={handleOpenChange}
-      >
+      <Modal className={styles.modal} isOpen onOpenChange={handleOpenChange}>
         <Column height="100%">
-          <Dialog className="rounded-lg">
+          <Dialog className="h-full rounded-lg">
             <Column padding="10">
               <SessionProfile websiteId={websiteId} sessionId={sessionId} onClose={closeModal} />
             </Column>
           </Dialog>
         </Column>
-      </Sheet>
+      </Modal>
     </ControlledDialog>
   );
 }