From 939dcb4c0aff2e91b1ba332326ca19ce5d2dda0e Mon Sep 17 00:00:00 2001
From: Kalo Chin <91766386+fdb02983rhy@users.noreply.github.com>
Date: Tue, 18 Mar 2025 10:12:49 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20enhance=20ListWrapper=20and=20PluginPa?=
 =?UTF-8?q?ge=20components=20with=20stable=20scro=E2=80=A6=20(#16048)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/components/plugins/marketplace/list/list-wrapper.tsx | 4 +++-
 web/app/components/plugins/plugin-page/index.tsx             | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
index 761adee5f8..77f8b866a1 100644
--- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -37,7 +37,9 @@ const ListWrapper = ({
   }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections])
 
   return (
-    <div className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'>
+    <div
+      style={{ scrollbarGutter: 'stable' }}
+      className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'>
       {
         plugins && (
           <div className='flex items-center mb-4 pt-3'>
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 31f17030bd..b5110b3769 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -145,6 +145,7 @@ const PluginPage = ({
     <div
       id='marketplace-container'
       ref={containerRef}
+      style={{ scrollbarGutter: 'stable' }}
       className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
         ? 'rounded-t-xl bg-components-panel-bg'
         : 'bg-background-body',