From d4c7c51878b7c83ab9c4460c0929ba0a7d2970fa Mon Sep 17 00:00:00 2001 From: "Jiaxiao (mossaka) Zhou" Date: Wed, 18 Feb 2026 18:03:25 +0000 Subject: [PATCH] Fix editor YAML output not displaying in right panel Primer CSS's `.d-flex` uses `display: flex !important` which overrides inline `style.display = 'none'` set by JavaScript. Switch to toggling Primer's `d-none` class (which uses `display: none !important`) instead of setting inline display styles. Also change `#app` from `min-height: 100vh` to `height: 100vh` so the flex layout properly constrains panel heights and the output container scrolls instead of expanding the page. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/public/editor/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/public/editor/index.html b/docs/public/editor/index.html index 41c45fa6222..da6cd99ff3a 100644 --- a/docs/public/editor/index.html +++ b/docs/public/editor/index.html @@ -193,7 +193,7 @@ -
+
@@ -310,7 +310,7 @@
Compiled YAML will appear here
- + 

       

     

   

@@ -547,8 +547,8 @@
 
   const md = editor.value;
   if (!md.trim()) {
-    outputPre.style.display = 'none';
-    outputPlaceholder.style.display = 'flex';
+    outputPre.classList.add('d-none');
+    outputPlaceholder.classList.remove('d-none');
     outputPlaceholder.textContent = 'Compiled YAML will appear here';
     currentYaml = '';
     return;
@@ -573,8 +573,8 @@
       setStatus('ready', 'Ready');
       currentYaml = result.yaml;
       outputPre.textContent = result.yaml;
-      outputPre.style.display = 'block';
-      outputPlaceholder.style.display = 'none';
+      outputPre.classList.remove('d-none');
+      outputPlaceholder.classList.add('d-none');
 
       if (result.warnings && result.warnings.length > 0) {
         warningText.textContent = result.warnings.join('\n');