Refactor MobilePage to work like shadcn components (#14388)

* Refactor MobilePage to work like shadcn components

* fix bug with search detail dialog not opening

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -150,7 +150,14 @@ export default function SearchDetailDialog({
   const Description = isDesktop ? DialogDescription : MobilePageDescription;
 
   return (
-    <Overlay open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
+    <Overlay
+      open={isOpen}
+      onOpenChange={() => {
+        if (search) {
+          setSearch(undefined);
+        }
+      }}
+    >
       <Content
         className={cn(
           "scrollbar-container overflow-y-auto",

web/src/components/overlay/dialog/PlatformAwareDialog.tsx

@@ -2,7 +2,9 @@ import {
   MobilePage,
   MobilePageContent,
   MobilePageHeader,
+  MobilePagePortal,
   MobilePageTitle,
+  MobilePageTrigger,
 } from "@/components/mobile/MobilePage";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import {
@@ -79,9 +81,11 @@ export function PlatformAwareSheet({
 }: PlatformAwareSheetProps) {
   if (isMobile) {
     return (
-      <div>
-        <div onClick={() => onOpenChange(true)}>{trigger}</div>
-        <MobilePage open={open} onOpenChange={onOpenChange}>
+      <MobilePage open={open} onOpenChange={onOpenChange}>
+        <MobilePageTrigger onClick={() => onOpenChange(true)}>
+          {trigger}
+        </MobilePageTrigger>
+        <MobilePagePortal>
           <MobilePageContent className="h-full overflow-hidden">
             <MobilePageHeader
               className="mx-2"
@@ -91,8 +95,8 @@ export function PlatformAwareSheet({
             </MobilePageHeader>
             <div className={contentClassName}>{content}</div>
           </MobilePageContent>
-        </MobilePage>
-      </div>
+        </MobilePagePortal>
+      </MobilePage>
     );
   }