fix(web): use ScrollArea in skill start tab

web/app/components/workflow/skill/start-tab/index.spec.tsx

@@ -59,8 +59,9 @@ describe('StartTabContent', () => {
       expect(screen.getByRole('button', { name: /workflow\.skill\.startTab\.importSkill/i })).toBeInTheDocument()
       expect(screen.getByRole('textbox')).toBeInTheDocument()
       expect(screen.getByText('workflow.skill.startTab.templatesTitle')).toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'workflow.skill.startTab.templatesTitle' })).toBeInTheDocument()
       expect(screen.getAllByRole('button', { name: /workflow\.skill\.startTab\.useThisSkill/i }).length).toBeGreaterThan(0)
-      expect(container.firstChild).toHaveClass('flex', 'h-full', 'w-full', 'bg-components-panel-bg')
+      expect(container.firstChild).toHaveClass('flex', 'h-full', 'min-h-0', 'w-full', 'bg-components-panel-bg')
     })
   })
 })

web/app/components/workflow/skill/start-tab/index.tsx

@@ -1,14 +1,27 @@
 'use client'
 
 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ScrollArea } from '@/app/components/base/ui/scroll-area'
 import CreateImportSection from './create-import-section'
 import SkillTemplatesSection from './skill-templates-section'
 
 const StartTabContent = () => {
+  const { t } = useTranslation('workflow')
+
   return (
-    <div className="flex h-full w-full flex-col overflow-auto bg-components-panel-bg">
+    <div className="flex h-full min-h-0 w-full flex-col bg-components-panel-bg">
-      <CreateImportSection />
+      <ScrollArea
-      <SkillTemplatesSection />
+        className="min-h-0 flex-1 overflow-hidden"
+        label={t('skill.startTab.templatesTitle')}
+        slotClassNames={{
+          content: 'pb-6',
+          scrollbar: 'z-20',
+        }}
+      >
+        <CreateImportSection />
+        <SkillTemplatesSection />
+      </ScrollArea>
     </div>
   )
 }

web/app/components/workflow/skill/start-tab/skill-templates-section.spec.tsx

@@ -95,11 +95,12 @@ describe('SkillTemplatesSection', () => {
 
   describe('Rendering', () => {
     it('should render all templates from registry', () => {
-      render(<SkillTemplatesSection />)
+      const { container } = render(<SkillTemplatesSection />)
 
       expect(screen.getByText('alpha')).toBeInTheDocument()
       expect(screen.getByText('beta')).toBeInTheDocument()
       expect(screen.getAllByRole('button', { name: /workflow\.skill\.startTab\.useThisSkill/i })).toHaveLength(2)
+      expect(container.querySelector('.sticky.top-0')).not.toBeNull()
     })
 
     it('should render empty state when search query has no matches', async () => {

web/app/components/workflow/skill/start-tab/skill-templates-section.tsx

@@ -78,7 +78,7 @@ const SkillTemplatesSection = () => {
   }, [searchQuery])
 
   return (
-    <section className="flex flex-1 flex-col gap-3">
+    <section className="flex flex-col gap-3">
       <div className="sticky top-0 z-10 flex flex-col gap-3 bg-components-panel-bg px-6 pb-1 pt-2">
         <SectionHeader
           title={t('skill.startTab.templatesTitle')}
@@ -92,7 +92,7 @@ const SkillTemplatesSection = () => {
       </div>
       {filtered.length === 0 && searchQuery
         ? (
-            <div className="flex flex-1 flex-col items-center justify-center gap-y-2">
+            <div className="flex min-h-60 flex-col items-center justify-center gap-y-2 px-6">
               <SearchMenu className="size-12 text-text-quaternary" />
               <span className="text-text-tertiary system-sm-regular">
                 {t('skill.startTab.noTemplatesFound')}