feat: No size constraints for sticky notes (#10393)

[ochosi]

When documenting larger flows with sticky notes and grouping larger sections of the flow, the size constraints are very limiting. No more than three elements can effectively fit on a sticky note.

By removing the size constraint, we enable users to more effectively create visual groups in a flow.

See #10393 for the full context of this change.

Note: I'm not aware of any negative effects of this change, so I wasn't sure what to test for.

Before:

After:

Summary by CodeRabbit

• New Features
  • Note nodes can now be resized without maximum width and height constraints, allowing for larger custom sizes while maintaining minimum dimension requirements.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The PR removes maximum width and height size constraints from the NoteNode component's resize functionality. The corresponding maximum dimension constants are deleted from the constants file, while minimum dimension constraints remain in place.

Changes

Cohort / File(s)	Summary
NoteNode resize constraints src/frontend/src/CustomNodes/NoteNode/index.tsx	Removed maxWidth and maxHeight props from NodeResizer component; removed imports of NOTE_NODE_MAX_WIDTH and NOTE_NODE_MAX_HEIGHT constants. Minimum width/height constraints unchanged.
Dimension constants src/frontend/src/constants/constants.ts	Deleted exported constants NOTE_NODE_MAX_WIDTH (1000) and NOTE_NODE_MAX_HEIGHT (800).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• fix: add max note node width #8648: Directly related PR that adds/enforces max size constraints on NoteNode, making it the inverse of this change.

Suggested labels

lgtm

Suggested reviewers

• mfortman11
• deon-sanchez

Pre-merge checks and finishing touches

❌ Failed checks (1 error, 3 warnings)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	This PR removes size constraints from the NoteNode component by eliminating maxWidth and maxHeight properties from the NodeResizer configuration and deleting the corresponding constants from the constants file. The PR is classified as a feature change that allows sticky notes to be resized without upper bounds. However, the PR includes no new or updated test files whatsoever. The Langflow codebase demonstrates an established testing pattern with __tests__ directories and .test.tsx/.test.ts files throughout the frontend, yet no tests exist for the NoteNode component or the changes made in this PR. Given that this is a feature modification affecting user-facing behavior (resizing constraints), test coverage should be included to verify the component functions correctly without these constraints.	The PR should include test files following the project's naming conventions (such as NoteNode.test.tsx in a __tests__ directory alongside the component). Tests should verify that the NodeResizer component renders without maxWidth and maxHeight constraints, that the component can be resized beyond the previously enforced limits, and that removal of the constants does not cause runtime errors or regressions. Additionally, any edge cases related to unconstrained sizing should be tested to ensure the feature works as intended.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Test Quality And Coverage	⚠️ Warning	This PR removes size constraints (maxWidth and maxHeight) from sticky notes by modifying the NoteNode component and removing related constants, but does not include any new test files or modifications to existing tests. While an existing Playwright test file (sticky-notes.spec.ts) performs functional E2E testing of sticky notes functionality (creation, text editing, color changes, duplication, copying, deletion, and character limits), it does not specifically test resize behavior or verify that the max size constraints have been removed. The PR changes production code in two files but adds zero test coverage for the key behavioral change—allowing sticky notes to resize beyond the previous 1000px×800px limits. This represents a gap in test coverage for the new functionality.	To improve test coverage, the PR should add or modify tests to verify that sticky notes can now resize beyond their previous maximum dimensions. A new test case should be added to the existing sticky-notes.spec.ts file using Playwright to programmatically resize a sticky note to dimensions exceeding the old 1000×800 limit and verify the resize succeeds. Alternatively, a unit test for the NoteNode component should validate that the NodeResizer component no longer enforces maxWidth and maxHeight constraints. The test should confirm that the resizing behavior correctly updates the node dimensions without upper bounds while maintaining the minimum constraints.
Test File Naming And Structure	⚠️ Warning	The Langflow repository has an established testing structure with 59 frontend test files organized in __tests__ directories using .test.tsx and .spec.tsx naming conventions (e.g., src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx), and backend tests following the test_*.py pytest pattern. However, this PR removes size constraints from sticky notes by modifying the NoteNode component and removing exported constants, but no test files were added or modified. The shell script results confirm that NoteNode has no existing test files and no new tests were created to verify the resize behavior changes or the impact of removing the size constraint constants.	To pass this check, the PR should include at least one test file following Langflow's established patterns: a __tests__/NoteNode.test.tsx file containing tests that verify the removal of size constraints, including tests that confirm nodes can now be resized beyond the previous limits. Additionally, tests should be added or updated to verify that the removal of NOTE_NODE_MAX_WIDTH and NOTE_NODE_MAX_HEIGHT constants does not break any dependent code, and should cover both positive scenarios (nodes resize without upper bounds) and edge cases (very large resize operations).

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "feat: No size constraints for sticky notes (#10393)" directly and clearly describes the main change in the pull request. The changeset removes the maxWidth and maxHeight props from NoteNode's NodeResizer and eliminates the corresponding constants, which precisely implements the "no size constraints" objective described in the PR. The title is concise, specific to sticky notes rather than overly broad, and avoids vague terminology. A teammate reviewing the commit history would immediately understand that this change removes sizing limitations on sticky notes.
Excessive Mock Usage Warning	✅ Passed	The PR modifies only two files: the NoteNode component and the constants file, with no test files changed or added. The existing sticky-notes E2E test in src/frontend/tests/extended/features/sticky-notes.spec.ts is a Playwright test that performs real browser interactions without mocks, testing actual functionality like clicking, resizing, and color changes. The setup mocks in setupTests.ts are minimal and necessary for browser APIs (ResizeObserver, IntersectionObserver, matchMedia), which is appropriate. No unit tests were found for the NoteNode component or the constants being removed. Therefore, there are no test files with excessive mock usage to evaluate, and the existing test approach demonstrates proper testing patterns that avoid excessive mocking in favor of real behavior verification.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[seanjameshale-prog]

@ochosi posting this in the related PR's:
I agree with the need to wrap components in sections. While the sticky note works in theory, we will design for a separate - wrap section/framing - experience, leaving the sticky note for it's intended use for documentation.

initial thoughts on how we'll be solving:

• select a desired group of components on the canvas
• allow wrapping them in a section
• give section an editable label and color
• remove section wrap

[ochosi]

@seanjameshale-prog Thanks for the feedback! I love the idea of a dedicated "Section" component for grouping, and that should definitely be explored.

However, for this specific PR, the goal is slightly different. I'm trying to improve documentation context rather than structural grouping. Often, you need a sticky note to "visually touch" multiple interacting components to explain a complex flow. Also, as opposed to what I imagine a section to be, I frequently use prose to provide more context to less technical reviewers. Small stickies make this difficult.

I considered a separate component for what I wanted to achieve, but it would essentially be a fork of NoteNode with 90% duplicated logic. By adding these small style tweaks (size/color) to the existing node, we solve the documentation problem immediately without adding the maintenance burden of a new component type.

[ogabrielluiz]

I agree with @ochosi. By allowing documentation to, in a way, span more than one component we can more easily document intentions rather than instructions.