Fix portal node inlining

package.json

@@ -104,7 +104,7 @@
     "react-intersection-observer": "^9.13.1",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.2",
-    "react-reverse-portal": "^2.1.2",
+    "react-reverse-portal": "link:../react-reverse-portal",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
     "react-textarea-autosize": "^8.5.5",

src/features/media/video/OutPortalEventDispatcher.tsx

@@ -1,7 +1,7 @@
 import { styled } from "@linaria/react";
 import React, { MouseEvent, useEffect, useRef } from "react";
 
-const Container = styled.div`
+const Container = styled.span`
   flex: 1;
   display: flex;
   width: 100%;

src/features/media/video/Player.tsx

@@ -18,7 +18,7 @@ import { PlainButton } from "#/features/shared/PlainButton";
 import { stopIonicTapClick } from "#/helpers/ionic";
 import { getVideoSrcForUrl } from "#/helpers/url";
 
-const Container = styled.div`
+const Container = styled.span`
   position: relative;
   overflow: hidden;
 
@@ -84,7 +84,7 @@ const VolumeButton = styled(PlainButton)`
   }
 `;
 
-const PlayOverlay = styled.div`
+const PlayOverlay = styled.span`
   position: absolute;
   inset: 0;
 

src/features/media/video/Video.tsx

@@ -1,5 +1,5 @@
 import { useImperativeHandle } from "react";
 import * as portals from "react-reverse-portal";
 
 import type { PlayerProps } from "./Player";
 import Player from "./Player";
@@ -32,14 +32,14 @@
   );
 
   return (
-    <div style={props.style} className={props.className}>
+    <span style={props.style} className={props.className}>
       {portalNode ? (
         <portals.OutPortal<typeof Player>
           {...props}
           node={portalNode}
           src={src}
         />
       ) : undefined}
-    </div>
+    </span>
   );
 }

src/features/media/video/VideoPortalProvider.tsx

@@ -1,4 +1,5 @@
 import { useIonViewWillEnter } from "@ionic/react";
+import { css } from "@linaria/core";
 import { noop } from "es-toolkit";
 import {
   createContext,
@@ -9,11 +10,17 @@
   useRef,
   useState,
 } from "react";
 import * as portals from "react-reverse-portal";
 
 import type Player from "./Player";
 import PortaledPlayer from "./PortaledPlayer";
 
+const portalNodeStyles = css`
+  flex: 1;
+  display: flex;
+  width: 100%;
+`;
+
 export default function VideoPortalProvider({
   children,
 }: React.PropsWithChildren) {
@@ -41,8 +48,8 @@
 
     const newRef = {
       sourceUid,
-      portalNode: portals.createHtmlPortalNode({
-        attributes: { style: "flex:1;display:flex;width:100%" },
+      portalNode: portals.createHtmlInlinePortalNode({
+        attributes: { className: portalNodeStyles },
       }),
     };