docs: Apply root styles to overlay portal so they are displayed corre…

…ctly. (#4197)

* docs: Apply root styles to overlay portal so they are displayed correctly.

* Create yellow-lies-bake.md

.changeset/yellow-lies-bake.md

@@ -0,0 +1,7 @@
+---
+"@marigold/docs": patch
+---
+
+docs: Apply root styles to overlay portal so they are displayed correctly.
+
+Overlay components (e.g. `<Dialog>` did not display correctly in the docs.

docs/app/_components/PortalContainer.tsx

@@ -3,11 +3,12 @@
 import { useThemeSwitch } from '@/ui/ThemeSwitch';
 
 export const PortalContaier = () => {
-  const { current } = useThemeSwitch();
+  const { current, themes } = useThemeSwitch();
+  const theme = themes[current];
 
   return (
     <div data-theme={current}>
-      <div id="portalContainer" className="not-prose" />
+      <div id="portalContainer" className={`not-prose ${theme.root?.()}`} />
     </div>
   );
 };

docs/ui/ComponentDemo.tsx

@@ -6,7 +6,7 @@ import {
   OverlayContainerProvider,
   Tabs,
 } from '@/ui';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { useThemeSwitch } from '@/ui/ThemeSwitch';
 
 // Props
@@ -40,7 +40,7 @@ export const ComponentDemo = ({
     throw Error(`No demo with name "${name}" found in the registry.`);
   }
 
-  const Demo = registry[name].demo;
+  const Demo: ComponentType<{}> = registry[name].demo;
   const { current, themes } = useThemeSwitch();
 
   const Wrapper = ({ children }: { children: ReactNode }) =>