From 414caa578d4d114bfbc4cfb592fab65bdfbe5420 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Thu, 2 Oct 2025 09:45:41 -0300
Subject: [PATCH] fix: add fixed space for scrollbar on flow sidebar (#9886)

* Added gutter stable class

* Added margin count on the sidebar width

* Added gutter stable to flow sidebar to not shrink when scrolling

* Reduced right border to account for scrollbar size

* Added pr-2 to mcp and sidebar bundles groups

* Fixed tests to expect right classes

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>
---
 .../flowSidebarComponent/components/McpSidebarGroup.tsx   | 2 +-
 .../components/__tests__/McpSidebarGroup.test.tsx         | 8 ++++++--
 .../components/__tests__/sidebarBundles.test.tsx          | 2 +-
 .../flowSidebarComponent/components/categoryGroup.tsx     | 2 +-
 .../flowSidebarComponent/components/sidebarBundles.tsx    | 2 +-
 .../FlowPage/components/flowSidebarComponent/index.tsx    | 2 +-
 src/frontend/tailwind.config.mjs                          | 3 +++
 7 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx
index e4033d21d6..4a9d20bdb9 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx
@@ -108,7 +108,7 @@ const McpSidebarGroup = ({
   }
 
   return (
-    <SidebarGroup className={`p-3 ${!hasMcpServers ? " h-full" : ""}`}>
+    <SidebarGroup className={`p-3 pr-2${!hasMcpServers ? " h-full" : ""}`}>
       {hasMcpServers && (
         <SidebarGroupLabel className="cursor-default w-full flex items-center justify-between">
           <span>MCP Servers</span>
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
index 391b47cf8c..c5c547f221 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
@@ -606,7 +606,11 @@ describe("McpSidebarGroup", () => {
       const TestWrapper = createTestWrapper();
       render(<McpSidebarGroup {...props} />, { wrapper: TestWrapper });
 
-      expect(screen.getByTestId("sidebar-group")).toHaveClass("p-3", "h-full");
+      expect(screen.getByTestId("sidebar-group")).toHaveClass(
+        "p-3",
+        "pr-2",
+        "h-full",
+      );
     });
 
     it("should not apply h-full class when hasMcpServers is true", () => {
@@ -619,7 +623,7 @@ describe("McpSidebarGroup", () => {
       render(<McpSidebarGroup {...props} />, { wrapper: TestWrapper });
 
       const sidebarGroup = screen.getByTestId("sidebar-group");
-      expect(sidebarGroup).toHaveClass("p-3");
+      expect(sidebarGroup).toHaveClass("p-3", "pr-2");
       expect(sidebarGroup).not.toHaveClass("h-full");
     });
   });
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx
index c31fff09d7..3e456e1287 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx
@@ -127,7 +127,7 @@ describe("MemoizedSidebarGroup (SidebarBundles)", () => {
     it("should apply correct CSS classes", () => {
       render(<MemoizedSidebarGroup {...defaultProps} />);
 
-      expect(screen.getByTestId("sidebar-group")).toHaveClass("p-3");
+      expect(screen.getByTestId("sidebar-group")).toHaveClass("p-3", "pr-2");
       expect(screen.getByTestId("sidebar-group-label")).toHaveClass(
         "cursor-default",
       );
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx
index a631a19e0c..d546776a00 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx
@@ -25,7 +25,7 @@ export const CategoryGroup = memo(function CategoryGroup({
   setShowConfig,
 }: CategoryGroupProps) {
   return (
-    <SidebarGroup className="p-3">
+    <SidebarGroup className="p-3 pr-2">
       {ENABLE_NEW_SIDEBAR && (
         <SidebarGroupLabel className="cursor-default flex items-center justify-between w-full">
           <span>Components</span>
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx
index 9fb2446143..7a515f4e87 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx
@@ -41,7 +41,7 @@ export const MemoizedSidebarGroup = memo(
     }, [BUNDLES, search, sortedCategories, dataFilter]);
 
     return (
-      <SidebarGroup className="p-3">
+      <SidebarGroup className="p-3 pr-2">
         <SidebarGroupLabel className="cursor-default w-full flex items-center justify-between">
           <span>Bundles</span>
           {showSearchConfigTrigger && ENABLE_NEW_SIDEBAR && (
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
index bbe414393a..3915c1644c 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
@@ -597,7 +597,7 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
 
           <SidebarContent
             segmentedSidebar={ENABLE_NEW_SIDEBAR}
-            className="flex-1 group-data-[collapsible=icon]:hidden"
+            className="flex-1 group-data-[collapsible=icon]:hidden gutter-stable"
           >
             {isLoading ? (
               <div className="flex flex-col gap-2">
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index f20eed6059..83413d90af 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -373,6 +373,9 @@ const config = {
             display: "none",
           },
         },
+        ".gutter-stable": {
+          "scrollbar-gutter": "stable",
+        },
         ".truncate-multiline": {
           display: "-webkit-box",
           "-webkit-line-clamp":