From fc19aa60d899a4fc82e28c9aebea45b13e176df5 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Tue, 4 Aug 2026 09:11:47 -0700
Subject: [PATCH] fix heatmap/replay css issues

---
 .../(reports)/heatmaps/HeatmapsPage.tsx            | 14 ++++++++++++--
 .../[websiteId]/replays/ReplayModal.module.css     |  1 +
 .../websites/[websiteId]/replays/ReplayModal.tsx   | 12 +++++-------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/HeatmapsPage.tsx b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/HeatmapsPage.tsx
index b771fc020..dad677aef 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/HeatmapsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/HeatmapsPage.tsx
@@ -67,7 +67,12 @@ export function HeatmapsPage({ websiteId }: { websiteId: string }) {
             {isPhone ? (
               <Column gap="3">
                 <Row>
-                  <SearchField value={search} onSearch={setSearch} placeholder="Search" />
+                  <SearchField
+                    value={search}
+                    onSearch={setSearch}
+                    placeholder="Search"
+                    className="w-full max-w-md"
+                  />
                 </Row>
                 <Row justifyContent="flex-end">
                   <FilterButtons
@@ -79,7 +84,12 @@ export function HeatmapsPage({ websiteId }: { websiteId: string }) {
               </Column>
             ) : (
               <Row alignItems="center" justifyContent="space-between" gap="4">
-                <SearchField value={search} onSearch={setSearch} placeholder="Search" />
+                <SearchField
+                  value={search}
+                  onSearch={setSearch}
+                  placeholder="Search"
+                  className="w-full max-w-md"
+                />
                 <FilterButtons
                   items={buttons}
                   value={mode}
diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css
index 627ea7140..06005edf4 100644
--- a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css
+++ b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.module.css
@@ -5,5 +5,6 @@
 
 .modal {
   width: min(calc(100dvw - 48px), 1320px);
+  height: calc(100dvh - 80px);
   overflow: hidden;
 }
diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx
index 004df69df..fcbeadf26 100644
--- a/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx
+++ b/src/app/(main)/websites/[websiteId]/replays/ReplayModal.tsx
@@ -1,12 +1,12 @@
 'use client';
-import { Column, Dialog, Sheet, type SheetProps } from '@umami/react-zen';
+import { Column, Dialog, Modal, type ModalProps } from '@umami/react-zen';
 import { ReplayPlayback } from '@/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayback';
 import { ControlledDialog } from '@/components/common/ControlledDialog';
 import { useNavigation } from '@/components/hooks';
 import { buildPath } from '@/lib/url';
 import styles from './ReplayModal.module.css';
 
-export interface ReplayModalProps extends SheetProps {
+export interface ReplayModalProps extends ModalProps {
   websiteId: string;
   replayId?: string;
 }
@@ -36,16 +36,14 @@ export function ReplayModal({ websiteId, replayId, className, ...props }: Replay
 
   return (
     <ControlledDialog>
-      <Sheet
+      <Modal
         {...props}
-        side="bottom"
-        size="calc(100dvh - 80px)"
         className={modalClassName}
         isOpen={!!activeReplayId}
         onOpenChange={handleOpenChange}
       >
         <Column height="100%">
-          <Dialog className={styles.sheet}>
+          <Dialog className="h-full rounded-lg">
             {({ close }) => (
               <Column padding="6">
                 {activeReplayId && (
@@ -55,7 +53,7 @@ export function ReplayModal({ websiteId, replayId, className, ...props }: Replay
             )}
           </Dialog>
         </Column>
-      </Sheet>
+      </Modal>
     </ControlledDialog>
   );
 }