fix double routing bug + positioning bottom for context menus mobile

src/components/overlays/OverlayDisplay.tsx

@@ -64,7 +64,7 @@ export function Overlay(props: OverlayProps) {
       {portalElement
         ? createPortal(
             <Transition show={router.isOverlayActive()} animation="none">
-              <div className="popout-wrapper pointer-events-auto fixed inset-0 z-[999] select-none">
+              <div className="popout-wrapper absolute overflow-hidden pointer-events-auto inset-0 z-[999] select-none">
                 <Transition animation="fade" isChild>
                   <div
                     onClick={click}
@@ -74,7 +74,11 @@ export function Overlay(props: OverlayProps) {
                     })}
                   />
                 </Transition>
-                <Transition animation="slide-up" className="h-0" isChild>
+                <Transition
+                  animation="slide-up"
+                  className="absolute inset-0 pointer-events-none"
+                  isChild
+                >
                   {props.children}
                 </Transition>
               </div>

src/components/overlays/positions/OverlayMobilePosition.tsx

@@ -10,7 +10,7 @@ export function OverlayMobilePosition(props: MobilePositionProps) {
   return (
     <div
       className={classNames([
-        "pointer-events-auto z-10 block origin-top-left touch-none overflow-hidden",
+        "pointer-events-auto z-10 bottom-0 block origin-top-left inset-x-0 absolute overflow-hidden",
         props.className,
       ])}
     >

src/components/player/atoms/Episodes.tsx

@@ -194,7 +194,11 @@ interface EpisodesProps {
   onChange?: (meta: PlayerMeta) => void;
 }
 
-export function Episodes(props: EpisodesProps) {
+export function EpisodesRouter(props: EpisodesProps) {
+  return <EpisodesOverlay onChange={props.onChange} id="episodes" />;
+}
+
+export function Episodes() {
   const { t } = useTranslation();
   const router = useOverlayRouter("episodes");
   const setHasOpenOverlay = usePlayerStore((s) => s.setHasOpenOverlay);
@@ -213,7 +217,6 @@ export function Episodes(props: EpisodesProps) {
       >
         {t("videoPlayer.buttons.episodes")}
       </VideoPlayerButton>
-      <EpisodesOverlay onChange={props.onChange} id={router.id} />
     </OverlayAnchor>
   );
 }

src/components/player/atoms/Settings.tsx

@@ -75,6 +75,10 @@ function SettingsOverlay({ id }: { id: string }) {
   );
 }
 
+export function SettingsRouter() {
+  return <SettingsOverlay id="settings" />;
+}
+
 export function Settings() {
   const router = useOverlayRouter("settings");
   const setHasOpenOverlay = usePlayerStore((s) => s.setHasOpenOverlay);
@@ -86,7 +90,6 @@ export function Settings() {
   return (
     <OverlayAnchor id={router.id}>
       <VideoPlayerButton onClick={() => router.open()} icon={Icons.GEAR} />
-      <SettingsOverlay id={router.id} />
     </OverlayAnchor>
   );
 }

src/pages/parts/player/PlayerPart.tsx

@@ -23,6 +23,8 @@ export function PlayerPart(props: PlayerPartProps) {
     <Player.Container onLoad={props.onLoad}>
       {props.children}
       <Player.BlackOverlay show={showTargets} />
+      <Player.EpisodesRouter onChange={props.onMetaChange} />
+      <Player.SettingsRouter />
       <Player.SubtitleView controlsShown={showTargets} />
 
       {status === playerStatus.PLAYING ? (
@@ -75,7 +77,7 @@ export function PlayerPart(props: PlayerPartProps) {
             <Player.Time />
           </Player.LeftSideControls>
           <div className="flex items-center space-x-3">
-            <Player.Episodes onChange={props.onMetaChange} />
+            <Player.Episodes />
             <Player.Airplay />
             <Player.Settings />
             <Player.Fullscreen />