pengjunjie/langflow
1
0
Fork 1
mirror of https://github.com/langflow-ai/langflow.git synced 2026-07-24 08:41:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: add fixed space for scrollbar on flow sidebar (#9886)

Browse Source 
* 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>
This commit is contained in:
Lucas Oliveira
2025-10-02 09:45:41 -03:00
committed by GitHub
parent e61316fe95
commit 414caa578d
7 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx
View File

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

8
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
View File

@ -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");
});
});

2
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx
View File

@ -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",
);

2
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx
View File

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

2
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx
View File

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

2
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
View File

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

3
src/frontend/tailwind.config.mjs
View File

@ -373,6 +373,9 @@ const config = {
display: "none",
},
},
".gutter-stable": {
"scrollbar-gutter": "stable",
},
".truncate-multiline": {
display: "-webkit-box",
"-webkit-line-clamp":