feat: unify sizing of artifact iframe with public site (#176)

i-am-bee · Jan 13, 2025 · fa12654 · fa12654
1 parent b81bbbd
commit fa12654
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 }