fix style/token application inside shadow dom

thomasyuill-livekit · thomasyuill-livekit · commit cc9aa0eacf73 · 2025-10-02T10:02:11.000-04:00
diff --git a/app/(app)/popup/layout.tsx b/app/(app)/popup/layout.tsx
diff --git a/app/(app)/popup/page.tsx b/app/(app)/popup/page.tsx
diff --git a/app/test/layout.tsx b/app/test/layout.tsx
@@ -0,0 +1,11 @@
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function Layout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/app/test/popup/page.tsx b/app/test/popup/page.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Script from 'next/script';
+import { getSandboxId } from '@/lib/env';
+
+export default function Page() {
+  const [sandboxId, setSandboxId] = useState('');
+
+  useEffect(() => {
+    setSandboxId(getSandboxId(window.location.origin));
+  }, []);
+
+  return (
+    <div>
+      <p>This page has no stylesheets inorder to test the embed-popup.js bundled styles</p>
+      {sandboxId && <Script src="/embed-popup.js" data-lk-sandbox-id={sandboxId} />}
+    </div>
+  );
+}
diff --git a/components/embed-popup/popup-view.tsx b/components/embed-popup/popup-view.tsx
@@ -126,14 +126,14 @@ export const PopupView = ({
               }}
               animate={{
                 left: chatOpen && (isCameraEnabled || isScreenShareEnabled) ? '37.5%' : '50%',
-                scale: chatOpen ? 0.41 : 1,
+                scale: chatOpen ? 0.275 : 1,
                 top: chatOpen ? '12px' : '50%',
                 translateY: chatOpen ? '0' : '-50%',
                 transformOrigin: chatOpen ? 'center top' : 'center center',
               }}
               transition={TILE_TRANSITION}
               className={cn(
-                'bg-bg1 dark:bg-bg1 pointer-events-none absolute z-10 flex aspect-[1.5] w-64 items-center justify-center rounded-2xl border border-transparent transition-colors',
+                'bg-bg1 dark:bg-bg1 pointer-events-none absolute z-10 flex aspect-square w-64 items-center justify-center rounded-2xl border border-transparent transition-colors',
                 chatOpen && 'bg-bg1 border-separator1 drop-shadow-2xl'
               )}
             >
diff --git a/components/welcome.tsx b/components/welcome.tsx
@@ -54,7 +54,7 @@ export default function Welcome() {
   }, [iframeEmbedUrl]);
 
   const popupTestUrl = useMemo(() => {
-    const url = new URL('/popup', window.location.origin);
+    const url = new URL('/test/popup', window.location.origin);
     return url.toString();
   }, []);
 
@@ -181,7 +181,7 @@ export default function Welcome() {
                   <p className="text-fg4 overflow-hidden text-sm text-ellipsis whitespace-nowrap">
                     Test your latest build at{' '}
                     <a
-                      href="/popup"
+                      href={popupTestUrl}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="underline"
diff --git a/styles/globals.css b/styles/globals.css
@@ -3,7 +3,8 @@
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
+:root,
+:host {
   --fg0: #000000;
   --fg1: #3b3b3b;
   --fg2: #4d4d4d;
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,6 +3,7 @@ const path = require('path');
 const Dotenv = require('dotenv-webpack');
 
 module.exports = {
+  mode: 'production',
   entry: './components/embed-popup/standalone-bundle-root.tsx', // Input file
   output: {
     path: path.resolve(__dirname, 'public'),
