From 1ed31840000bec00ad63badfee3ec12bc590b881 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 11 May 2026 15:01:27 +0800
Subject: [PATCH] fix: add psd layer list scrollbar

---
 .../agents/AgentPsdTemplateEditorDialog.tsx   | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx
index cf0f838e1..dd5e72356 100644
--- a/components/agents/AgentPsdTemplateEditorDialog.tsx
+++ b/components/agents/AgentPsdTemplateEditorDialog.tsx
@@ -431,9 +431,11 @@ function TemplatePreviewImage({
 }
 
 function getScrollAreaViewportElement(root: HTMLDivElement | null) {
-  return root?.querySelector(
-    "[data-radix-scroll-area-viewport]"
-  ) as HTMLDivElement | null;
+  return (
+    (root?.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    ) as HTMLDivElement | null) || root
+  );
 }
 
 function isLikelyStableRenderImageUrl(url: string) {
@@ -3240,6 +3242,25 @@ export function AgentPsdTemplateEditorDialog({
         .psd-preview-viewport::-webkit-scrollbar-thumb:hover {
           background-color: rgba(16, 185, 129, 0.5);
         }
+        .psd-layer-visibility-scroll {
+          scrollbar-color: rgba(16, 185, 129, 0.55) rgba(255, 255, 255, 0.08);
+          scrollbar-width: thin;
+        }
+        .psd-layer-visibility-scroll::-webkit-scrollbar {
+          width: 10px;
+        }
+        .psd-layer-visibility-scroll::-webkit-scrollbar-track {
+          background: rgba(255, 255, 255, 0.08);
+          border-radius: 999px;
+        }
+        .psd-layer-visibility-scroll::-webkit-scrollbar-thumb {
+          background: rgba(16, 185, 129, 0.55);
+          border: 2px solid rgba(10, 10, 10, 0.9);
+          border-radius: 999px;
+        }
+        .psd-layer-visibility-scroll::-webkit-scrollbar-thumb:hover {
+          background: rgba(16, 185, 129, 0.75);
+        }
       `,
         }}
       />
@@ -4415,7 +4436,7 @@ export function AgentPsdTemplateEditorDialog({
                   )}
 
                   {selectedTemplateLayers.length > 0 ? (
-                    <div className="shrink-0 rounded-2xl border border-white/10 bg-white/[0.02] p-4 shadow-inner">
+                    <div className="flex shrink-0 flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-4 shadow-inner">
                       <div className="mb-3 flex items-center justify-between gap-3">
                         <div>
                           <div className="font-semibold text-sm text-white">
@@ -4455,11 +4476,11 @@ export function AgentPsdTemplateEditorDialog({
                           </div>
                         </div>
                       </div>
-                      <ScrollArea
-                        className="max-h-[220px] pr-2"
+                      <div
+                        className="psd-layer-visibility-scroll max-h-[220px] min-h-0 overflow-y-auto overscroll-contain pr-2"
                         ref={hiddenLayerScrollAreaRef}
                       >
-                        <div className="space-y-2">
+                        <div className="space-y-2 pb-1">
                           {orderedPreviewLayers.map((layer) => {
                             const isHidden = hiddenLayerIdSet.has(layer.id);
                             const isSelected = selectedLayerId === layer.id;
@@ -4523,7 +4544,7 @@ export function AgentPsdTemplateEditorDialog({
                             );
                           })}
                         </div>
-                      </ScrollArea>
+                      </div>
                     </div>
                   ) : null}
                 </div>