From ff07ca97df36172b0ff33bcfb8d9fb3235b429fd Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 22 Jan 2026 15:17:12 +0800
Subject: [PATCH] fix: prevent horizontal page scroll in skill editor layout

Add overflow-hidden to SkillPageLayout and min-w-0 to flex children
to ensure wide content (like SQLite tables with many columns) scrolls
internally rather than causing the entire page to scroll horizontally.
---
 web/app/components/workflow/skill/content-area.tsx      | 2 +-
 web/app/components/workflow/skill/content-body.tsx      | 2 +-
 web/app/components/workflow/skill/skill-page-layout.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/app/components/workflow/skill/content-area.tsx b/web/app/components/workflow/skill/content-area.tsx
index 2221b3d392..f6347944b9 100644
--- a/web/app/components/workflow/skill/content-area.tsx
+++ b/web/app/components/workflow/skill/content-area.tsx
@@ -5,7 +5,7 @@ type ContentAreaProps = PropsWithChildren
 
 const ContentArea: FC<ContentAreaProps> = ({ children }) => {
   return (
-    <section className="flex min-h-0 flex-1 flex-col rounded-lg">
+    <section className="flex min-h-0 min-w-0 flex-1 flex-col rounded-lg">
       {children}
     </section>
   )
diff --git a/web/app/components/workflow/skill/content-body.tsx b/web/app/components/workflow/skill/content-body.tsx
index 8a94db6e04..51a066766e 100644
--- a/web/app/components/workflow/skill/content-body.tsx
+++ b/web/app/components/workflow/skill/content-body.tsx
@@ -5,7 +5,7 @@ type ContentBodyProps = PropsWithChildren
 
 const ContentBody: FC<ContentBodyProps> = ({ children }) => {
   return (
-    <div className="flex min-h-0 flex-1">
+    <div className="flex min-h-0 min-w-0 flex-1">
       {children}
     </div>
   )
diff --git a/web/app/components/workflow/skill/skill-page-layout.tsx b/web/app/components/workflow/skill/skill-page-layout.tsx
index 918da9731d..3adbb409aa 100644
--- a/web/app/components/workflow/skill/skill-page-layout.tsx
+++ b/web/app/components/workflow/skill/skill-page-layout.tsx
@@ -5,7 +5,7 @@ type SkillPageLayoutProps = PropsWithChildren
 
 const SkillPageLayout: FC<SkillPageLayoutProps> = ({ children }) => {
   return (
-    <div className="flex h-full gap-3">
+    <div className="flex h-full gap-3 overflow-hidden">
       {children}
     </div>
   )