fix heatmap/replay css issues

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}

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

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