mobile close button for popouts

src/components/overlays/OverlayRouter.tsx

@@ -72,7 +72,11 @@ function RouterBase(props: { id: string; children: ReactNode }) {
   }, [routeMeta?.height, routeMeta?.width, isMobile, api]);
 
   return (
-    <a.div ref={ref} style={dimensions} className="overflow-hidden">
+    <a.div
+      ref={ref}
+      style={dimensions}
+      className="overflow-hidden relative z-10"
+    >
       <Flare.Base className="group w-full bg-video-context-border h-full rounded-2xl transition-colors duration-100 text-video-context-type-main">
         <Flare.Light
           flareSize={400}

src/components/overlays/positions/OverlayMobilePosition.tsx

@@ -1,20 +1,35 @@
 import classNames from "classnames";
 import { ReactNode } from "react";
 
+import { useInternalOverlayRouter } from "@/hooks/useOverlayRouter";
+
 interface MobilePositionProps {
   children?: ReactNode;
   className?: string;
 }
 
 export function OverlayMobilePosition(props: MobilePositionProps) {
+  const router = useInternalOverlayRouter("hello world :)");
+
   return (
     <div
       className={classNames([
-        "pointer-events-auto z-10 bottom-0 block origin-top-left inset-x-0 absolute overflow-hidden",
+        "pointer-events-auto px-4 pb-6 z-10 bottom-0 block origin-top-left inset-x-0 absolute overflow-hidden",
         props.className,
       ])}
     >
       {props.children}
+
+      {/* Close button */}
+      <button
+        className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-border active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white"
+        type="button"
+        onClick={() => router.close()}
+      >
+        Close
+      </button>
+      {/* Gradient to hide the progress */}
+      <div className="pointer-events-none absolute z-0 bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent" />
     </div>
   );
 }