lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add psd layer list scrollbar
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-05-11 15:01:27 +08:00
parent 40848ffdb5
commit 1ed3184000
1 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/agents/AgentPsdTemplateEditorDialog.tsx
View File

@ -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>