From fa1265406de80d2d88f6be6e62f734232f088a8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petr=20Bul=C3=A1nek?= <bulanek.petr@gmail.com>
Date: Mon, 13 Jan 2025 10:08:56 +0100
Subject: [PATCH] feat: unify sizing of artifact iframe with public site (#176)

---
 src/modules/apps/builder/AppBuilder.tsx          |  1 +
 .../builder/ArtifactSharedIframe.module.scss     | 16 +++++++++++++---
 .../apps/builder/ArtifactSharedIframe.tsx        | 16 +++++++++++++---
 src/modules/apps/detail/AppDetail.tsx            |  5 ++++-
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/modules/apps/builder/AppBuilder.tsx b/src/modules/apps/builder/AppBuilder.tsx
index 7fbddc8b..67a887cb 100644
--- a/src/modules/apps/builder/AppBuilder.tsx
+++ b/src/modules/apps/builder/AppBuilder.tsx
@@ -348,6 +348,7 @@ function AppBuilderContent() {
           <TabPanels>
             <TabPanel key={TabsKeys.Preview}>
               <ArtifactSharedIframe
+                variant="builder"
                 sourceCode={code}
                 onFixError={handleFixError}
               />
diff --git a/src/modules/apps/builder/ArtifactSharedIframe.module.scss b/src/modules/apps/builder/ArtifactSharedIframe.module.scss
index 9b6a3c47..c27d4e88 100644
--- a/src/modules/apps/builder/ArtifactSharedIframe.module.scss
+++ b/src/modules/apps/builder/ArtifactSharedIframe.module.scss
@@ -24,9 +24,6 @@
   justify-content: center;
   align-items: center;
   z-index: 1;
-  iframe {
-    max-inline-size: rem(800px);
-  }
 
   :global(.#{$prefix}--loading-overlay) {
     position: absolute;
@@ -66,3 +63,16 @@
     }
   }
 }
+
+@include breakpoint-up(md) {
+  .root {
+    &.variant-detail iframe {
+      min-inline-size: rem(624px);
+      max-inline-size: rem(1264px);
+      inline-size: 50%;
+    }
+    &.variant-builder iframe {
+      max-inline-size: rem(800px);
+    }
+  }
+}
diff --git a/src/modules/apps/builder/ArtifactSharedIframe.tsx b/src/modules/apps/builder/ArtifactSharedIframe.tsx
index 98d89385..d1ca5063 100644
--- a/src/modules/apps/builder/ArtifactSharedIframe.tsx
+++ b/src/modules/apps/builder/ArtifactSharedIframe.tsx
@@ -18,16 +18,18 @@
 import { createChatCompletion, modulesToPackages } from '@/app/api/apps';
 import { ChatCompletionCreateBody } from '@/app/api/apps/types';
 import { ApiError } from '@/app/api/errors';
+import { useAppContext } from '@/layout/providers/AppProvider';
 import { useTheme } from '@/layout/providers/ThemeProvider';
 import { USERCONTENT_SITE_URL } from '@/utils/constants';
 import { removeTrailingSlash } from '@/utils/helpers';
 import { Loading } from '@carbon/react';
+import clsx from 'clsx';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import classes from './ArtifactSharedIframe.module.scss';
 import AppPlaceholder from './Placeholder.svg';
-import { useAppContext } from '@/layout/providers/AppProvider';
 
 interface Props {
+  variant: 'detail' | 'builder';
   sourceCode: string | null;
   onFixError?: (errorText: string) => void;
 }
@@ -42,7 +44,11 @@ function getErrorMessage(error: unknown) {
   return 'Unknown error when calling LLM function.';
 }
 
-export function ArtifactSharedIframe({ sourceCode, onFixError }: Props) {
+export function ArtifactSharedIframe({
+  variant,
+  sourceCode,
+  onFixError,
+}: Props) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [state, setState] = useState<State>(State.LOADING);
   const { appliedTheme: theme } = useTheme();
@@ -141,7 +147,11 @@ export function ArtifactSharedIframe({ sourceCode, onFixError }: Props) {
   }, [handleMessage]);
 
   return (
-    <div className={classes.root}>
+    <div
+      className={clsx(classes.root, {
+        [classes[`variant-${variant}`]]: variant,
+      })}
+    >
       <iframe
         ref={iframeRef}
         src={USERCONTENT_SITE_URL}
diff --git a/src/modules/apps/detail/AppDetail.tsx b/src/modules/apps/detail/AppDetail.tsx
index 410ab3fd..6e8f6844 100644
--- a/src/modules/apps/detail/AppDetail.tsx
+++ b/src/modules/apps/detail/AppDetail.tsx
@@ -24,7 +24,10 @@ interface Props {
 export function AppDetail({ artifact }: Props) {
   return (
     <div className={classes.root}>
-      <ArtifactSharedIframe sourceCode={artifact.source_code || null} />
+      <ArtifactSharedIframe
+        variant="detail"
+        sourceCode={artifact.source_code || null}
+      />
     </div>
   );
 }