fix: scroll in media panel

apps/web/src/components/editor/media-panel/index.tsx

@@ -46,9 +46,9 @@ export function MediaPanel() {
   };
 
   return (
-    <div className="h-full flex flex-col bg-panel rounded-sm overflow-scroll">
+    <div className="h-full flex flex-col bg-panel rounded-sm">
       <TabBar />
-      <div className="flex-1">{viewMap[activeTab]}</div>
+      <div className="flex-1 overflow-y-auto">{viewMap[activeTab]}</div>
     </div>
   );
 }

apps/web/src/components/editor/media-panel/views/media.tsx

@@ -25,6 +25,7 @@ import {
 import { DraggableMediaItem } from "@/components/ui/draggable-item";
 import { useProjectStore } from "@/stores/project-store";
 import { useTimelineStore } from "@/stores/timeline-store";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export function MediaView() {
   const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
@@ -204,7 +205,7 @@ export function MediaView() {
         className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}
         {...dragProps}
       >
-        <div className="p-3 pb-2">
+        <div className="p-3 pb-2 bg-panel">
           {/* Search and filter controls */}
           <div className="flex gap-2">
             <Select value={mediaFilter} onValueChange={setMediaFilter}>
@@ -241,7 +242,8 @@ export function MediaView() {
           </div>
         </div>
 
-        <div className="flex-1 overflow-y-auto p-3 pt-0">
+        <ScrollArea className="h-full">
+          <div className="flex-1 p-3 pt-0">
             {isDragOver || filteredMediaItems.length === 0 ? (
               <MediaDragOverlay
                 isVisible={true}
@@ -292,6 +294,7 @@ export function MediaView() {
               </div>
             )}
           </div>
+        </ScrollArea>
       </div>
     </>
   );