fix: FIT-155: Improve playground inline preview styles within docs (#7614)

Author: bmartel

docs/themes/v2/source/css/styles.css

@@ -2327,6 +2327,8 @@ code.hljs {
 #main-preview iframe {
   width: 100%;
   margin: 1em 0;
+  border: 1px var(--color-gray-300) solid;
+  border-radius: .75rem;
 }
 
 .page-type-playground .content-markdown {

docs/themes/v2/source/js/code-blocks-enhancements.js

@@ -18,7 +18,7 @@ function encodeConfig(text) {
   return encodeURIComponent(normalizeNewlines(text));
 }
 
-function editorIframe(config, modal, id) {
+function editorIframe(config, modal, id, inline = false) {
   // generate new iframe
   const iframeTemplate = `<iframe id="render-editor-${id}" class="api-render-editor" style="display:none"></iframe>`;
 
@@ -34,7 +34,7 @@ function editorIframe(config, modal, id) {
 
   const templateValue = encodeConfig(config);
 
-  iframe.src = `${getLabelStudioPlaygroundUrl()}?config=${templateValue}&mode=preview`;
+  iframe.src = `${getLabelStudioPlaygroundUrl()}?config=${templateValue}&mode=${inline ? "preview-inline" : "preview"}`;
 }
 
 function showRenderEditor(config) {
@@ -106,7 +106,7 @@ function showRenderEditor(config) {
 
     const inlinePlayground = document.querySelector("#main-preview");
 
-    if (inlinePlayground) editorIframe(code, inlinePlayground);
+    if (inlinePlayground) editorIframe(code, inlinePlayground, true);
   };
 
   const enhanceCodeBlocks = (codeBlock) => {

web/apps/playground/src/atoms/configAtoms.ts

@@ -11,9 +11,10 @@ export const showPreviewAtom = atom<boolean>(true);
 export const sampleTaskAtom = atom<any>({});
 export const annotationAtom = atom<any>([]);
 export const modeAtom = atom<"preview" | "editor" | "">("editor");
-export const displayModeAtom = atom<"preview" | "all">(() => {
+export const displayModeAtom = atom<"preview" | "preview-inline" | "all">(() => {
   const params = getQueryParams();
   const mode = params.get("mode");
   if (mode === "preview") return "preview";
+  if (mode === "preview-inline") return "preview-inline";
   return "all";
 });

web/apps/playground/src/components/PlaygroundApp/PlaygroundApp.tsx

@@ -119,13 +119,13 @@ export const PlaygroundApp = () => {
     >
       <ToastProvider>
         {/* Minimal top bar */}
-        {displayMode !== "preview" && <TopBar />}
+        {!displayMode.startsWith("preview") && <TopBar />}
         {/* Editor/Preview split */}
         <div className="flex flex-1 min-h-0 min-w-0 relative">
           {/* Editor Panel */}
-          {displayMode !== "preview" && <EditorPanel editorWidth={editorWidth} />}
+          {!displayMode.startsWith("preview") && <EditorPanel editorWidth={editorWidth} />}
           {/* Resizable Divider */}
-          {displayMode !== "preview" && (
+          {!displayMode.startsWith("preview") && (
             <div
               className="w-2 cursor-col-resize bg-neutral-emphasis hover:bg-primary-border active:bg-primary-border transition-colors duration-100 z-10"
               onMouseDown={(e: MouseEvent) => {

web/apps/playground/src/components/PreviewPanel/PreviewPanel.tsx

@@ -84,7 +84,8 @@ export const PreviewPanel: FC<PreviewPanelProps> = memo(
             settings: {
               forceBottomPanel: true,
               collapsibleBottomPanel: true,
-              defaultCollapsedBottomPanel: displayMode === "all",
+              // Default collapsed in all,preview-inline, but not in preview
+              defaultCollapsedBottomPanel: displayMode !== "preview",
               fullscreen: false,
             },
             onStorageInitialized: (LS: any) => {