1

src/components/square-hole-runtime/SquareHoleRuntimeShell.tsx

@@ -29,6 +29,7 @@ type SquareHoleRuntimeShellProps = {
   run: SquareHoleRunSnapshot | null;
   isBusy?: boolean;
   error?: string | null;
+  embedded?: boolean;
   onBack: () => void;
   onRestart: () => void;
   onDropShape: (
@@ -148,6 +149,7 @@ export function SquareHoleRuntimeShell({
   run,
   isBusy = false,
   error = null,
+  embedded = false,
   onBack,
   onRestart,
   onDropShape,
@@ -327,7 +329,9 @@ export function SquareHoleRuntimeShell({
 
   if (!run) {
     return (
-      <div className="flex min-h-dvh items-center justify-center bg-slate-950 text-white">
+      <div
+        className={`flex ${embedded ? 'h-full min-h-0 w-full' : 'min-h-dvh'} items-center justify-center bg-slate-950 text-white`}
+      >
         {isBusy ? '载入中' : (error ?? '暂无运行态')}
       </div>
     );
@@ -336,7 +340,9 @@ export function SquareHoleRuntimeShell({
   const feedback = run.lastFeedback;
 
   return (
-    <main className="relative flex min-h-dvh w-full justify-center overflow-hidden bg-[#101827] text-white">
+    <main
+      className={`relative flex ${embedded ? 'h-full min-h-0' : 'min-h-dvh'} w-full justify-center overflow-hidden bg-[#101827] text-white`}
+    >
       {run.backgroundImageSrc ? (
         <ResolvedAssetImage
           src={run.backgroundImageSrc}
@@ -375,7 +381,7 @@ export function SquareHoleRuntimeShell({
         </div>
       ) : null}
       <div
-        className="relative flex min-h-dvh min-w-0 flex-col overflow-hidden px-3 pb-[calc(env(safe-area-inset-bottom,0px)+0.8rem)] pt-[calc(env(safe-area-inset-top,0px)+0.65rem)]"
+        className={`relative flex ${embedded ? 'h-full min-h-0' : 'min-h-dvh'} min-w-0 flex-col overflow-hidden px-3 pb-[calc(env(safe-area-inset-bottom,0px)+0.8rem)] pt-[calc(env(safe-area-inset-top,0px)+0.65rem)]`}
         style={{
           boxSizing: 'border-box',
           maxWidth: '100vw',