From 21226fc01097948b2bd416267096358e44ffcbb6 Mon Sep 17 00:00:00 2001
From: 7418 <7418@openclaw.ai>
Date: Sat, 7 Feb 2026 22:58:06 +0800
Subject: [PATCH] fix: replace Radix ScrollArea with native overflow-y-auto for
 Skills list (closes #8)

Radix ScrollArea doesn't reliably get constrained height in flex
layouts, preventing mouse wheel scrolling. Replace with a simple
div using overflow-y-auto and min-h-0 which works correctly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/skills/SkillsManager.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/skills/SkillsManager.tsx b/src/components/skills/SkillsManager.tsx
index 61303b0..a17fcb4 100644
--- a/src/components/skills/SkillsManager.tsx
+++ b/src/components/skills/SkillsManager.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { ScrollArea } from "@/components/ui/scroll-area";
+
 import { HugeiconsIcon } from "@hugeicons/react";
 import { PlusSignIcon, Search01Icon, ZapIcon, Loading02Icon } from "@hugeicons/core-free-icons";
 import { SkillListItem } from "./SkillListItem";
@@ -144,7 +144,7 @@ export function SkillsManager() {
               />
             </div>
           </div>
-          <ScrollArea className="flex-1">
+          <div className="flex-1 overflow-y-auto min-h-0">
             <div className="p-1">
               {projectSkills.length > 0 && (
                 <div className="mb-1">
@@ -242,7 +242,7 @@ export function SkillsManager() {
                 </div>
               )}
             </div>
-          </ScrollArea>
+          </div>
         </div>
 
         {/* Right: editor */}