From 4b6f1861ef2a69fb4c8c0261401fe116cad7aade Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Sat, 14 Feb 2026 11:00:08 +0800
Subject: [PATCH] fix: view vars artifacts md not support scroll and loading
 not in the center

---
 .../skill/editor/markdown-file-editor.tsx     | 57 ++++++++++---------
 .../variable-inspect/artifacts-tab.tsx        |  2 +-
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/web/app/components/workflow/skill/editor/markdown-file-editor.tsx b/web/app/components/workflow/skill/editor/markdown-file-editor.tsx
index efa144c8b1..53df2a5cd7 100644
--- a/web/app/components/workflow/skill/editor/markdown-file-editor.tsx
+++ b/web/app/components/workflow/skill/editor/markdown-file-editor.tsx
@@ -29,34 +29,37 @@ const MarkdownFileEditor = ({
   }, [value, onChange])
 
   return (
-    <div className="h-full w-full bg-components-panel-bg">
-      <SkillEditor
-        instanceId={instanceId}
-        value={value}
-        onChange={handleChange}
-        editable={!readOnly}
-        autoFocus={!readOnly && autoFocus}
-        onAutoFocus={onAutoFocus}
-        collaborationEnabled={readOnly ? false : collaborationEnabled}
-        showLineNumbers
-        className="h-full"
-        wrapperClassName="h-full"
-        placeholder={readOnly
-          ? undefined
-          : (
-              <span className="flex items-center gap-1 text-components-input-text-placeholder">
-                <span>{t('promptEditor.skillMarkdown.placeholderPrefix', { ns: 'common' })}</span>
-                <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-placeholder system-kbd">/</span>
-                <span className="text-[13px] leading-4 underline decoration-dotted">
-                  {t('promptEditor.skillMarkdown.placeholderReferenceFiles', { ns: 'common' })}
+    <div className="flex h-full min-h-0 w-full bg-components-panel-bg">
+      {/* Lexical editor defaults to `overflow: visible`; provide a bounded scroll container. */}
+      <div className="h-full min-h-0 flex-1 overflow-y-auto">
+        <SkillEditor
+          instanceId={instanceId}
+          value={value}
+          onChange={handleChange}
+          editable={!readOnly}
+          autoFocus={!readOnly && autoFocus}
+          onAutoFocus={onAutoFocus}
+          collaborationEnabled={readOnly ? false : collaborationEnabled}
+          showLineNumbers
+          className="h-full"
+          wrapperClassName="h-full"
+          placeholder={readOnly
+            ? undefined
+            : (
+                <span className="flex items-center gap-1 text-components-input-text-placeholder">
+                  <span>{t('promptEditor.skillMarkdown.placeholderPrefix', { ns: 'common' })}</span>
+                  <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-placeholder system-kbd">/</span>
+                  <span className="text-[13px] leading-4 underline decoration-dotted">
+                    {t('promptEditor.skillMarkdown.placeholderReferenceFiles', { ns: 'common' })}
+                  </span>
+                  <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-placeholder system-kbd">@</span>
+                  <span className="text-[13px] leading-4 underline decoration-dotted">
+                    {t('promptEditor.skillMarkdown.placeholderUseTools', { ns: 'common' })}
+                  </span>
                 </span>
-                <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-placeholder system-kbd">@</span>
-                <span className="text-[13px] leading-4 underline decoration-dotted">
-                  {t('promptEditor.skillMarkdown.placeholderUseTools', { ns: 'common' })}
-                </span>
-              </span>
-            )}
-      />
+              )}
+        />
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/variable-inspect/artifacts-tab.tsx b/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
index 16eae84004..3ca4d40dfe 100644
--- a/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
+++ b/web/app/components/workflow/variable-inspect/artifacts-tab.tsx
@@ -204,7 +204,7 @@ const ArtifactsTab = (headerProps: InspectHeaderProps) => {
               ? (
                   <div className="min-h-0 grow">
                     {isDownloadUrlLoading
-                      ? <Loading type="area" />
+                      ? <div className="flex h-full items-center justify-center"><Loading type="area" /></div>
                       : downloadUrlData?.download_url
                         ? (
                             <ReadOnlyFilePreview