fix(platform): give a dialog portalled out of a surface its own surface

A surface inside a surface collapses by context, and a portal keeps context, so
BodyDialog under ResponseActions' Surface rendered at the body with no
[data-platform-ui] and the feedback form lost all its styling.

Author: waleedlatif1

apps/sim/platform/design-system/components/surface/platform-surface.tsx

@@ -11,6 +11,8 @@ interface PlatformSurfaceProps {
   systemMono?: boolean
   /** Paints the canvas, for a surface that fills a region. Otherwise whatever is behind shows through. */
   canvas?: boolean
+  /** Starts a surface even inside another, for a tree a portal carries out of the outer one's DOM. */
+  detached?: boolean
   children: ReactNode
 }
 
@@ -24,9 +26,10 @@ export function PlatformSurface({
   systemFont,
   systemMono,
   canvas,
+  detached,
 }: PlatformSurfaceProps) {
   const nested = useContext(InsideSurface)
-  if (nested) return children
+  if (nested && !detached) return children
   return (
     <div
       data-platform-ui=''

apps/sim/platform/design-system/components/surface/surface.tsx

@@ -8,6 +8,8 @@ import styles from '@/platform/design-system/components/surface/surface.module.c
 interface SurfaceProps {
   /** Paints the canvas, for a surface that fills a region. */
   canvas?: boolean
+  /** For a tree portalled out of its parent surface, whose context still says it is inside one. */
+  detached?: boolean
   children: ReactNode
 }
 
@@ -18,9 +20,9 @@ interface SurfaceProps {
  * Never render a legacy component inside: the surface redefines tokens legacy utilities read. Compose
  * one beside a surface instead.
  */
-export function Surface({ canvas, children }: SurfaceProps) {
+export function Surface({ canvas, detached, children }: SurfaceProps) {
   return (
-    <PlatformSurface theme='system' canvas={canvas}>
+    <PlatformSurface theme='system' canvas={canvas} detached={detached}>
       {children}
     </PlatformSurface>
   )

apps/sim/platform/embedded/app/(shell)/_components/conversation/dialogs.tsx

@@ -21,7 +21,7 @@ interface BodyDialogProps {
 export function BodyDialog({ className, children }: BodyDialogProps) {
   return createPortal(
     <div className={className ? `${className} ${styles.dialogHost}` : styles.dialogHost}>
-      <Surface>{children}</Surface>
+      <Surface detached>{children}</Surface>
     </div>,
     document.body
   )