jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: add max note node width (#8648)

Browse source 
Added max note width
This commit is contained in:
Lucas Oliveira 2025-06-20 12:46:21 -03:00 • committed by GitHub
commit fcbb6d2825
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/frontend/src/App.css
View file

@ -19,7 +19,6 @@ body {
} }
.react-flow__node { .react-flow__node {
width: fit-content !important;
height: auto; height: auto;
border-radius: auto; border-radius: auto;
min-width: inherit; min-width: inherit;

2
src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
View file

@ -155,7 +155,7 @@ export default function NodeDescription({
maxLength={charLimit} maxLength={charLimit}
className={cn( className={cn(
"nowheel w-full text-xs focus:border-primary focus:ring-0", "nowheel w-full text-xs focus:border-primary focus:ring-0",
stickyNote ? "p-0" : "px-2 py-0.5", stickyNote ? "p-0 pt-0.5 !text-mmd" : "px-2 py-0.5",
inputClassName, inputClassName,
)} )}
autoFocus autoFocus

11
src/frontend/src/CustomNodes/NoteNode/index.tsx
View file

@ -1,5 +1,7 @@
import { import {
COLOR_OPTIONS, COLOR_OPTIONS,
NOTE_NODE_MAX_HEIGHT,
NOTE_NODE_MAX_WIDTH,
NOTE_NODE_MIN_HEIGHT, NOTE_NODE_MIN_HEIGHT,
NOTE_NODE_MIN_WIDTH, NOTE_NODE_MIN_WIDTH,
} from "@/constants/constants"; } from "@/constants/constants";
@ -111,6 +113,8 @@ function NoteNode({
<NodeResizer <NodeResizer
minWidth={Math.max(DEFAULT_WIDTH, NOTE_NODE_MIN_WIDTH)} minWidth={Math.max(DEFAULT_WIDTH, NOTE_NODE_MIN_WIDTH)}
minHeight={Math.max(DEFAULT_HEIGHT, NOTE_NODE_MIN_HEIGHT)} minHeight={Math.max(DEFAULT_HEIGHT, NOTE_NODE_MIN_HEIGHT)}
maxWidth={NOTE_NODE_MAX_WIDTH}
maxHeight={NOTE_NODE_MAX_HEIGHT}
onResize={(_, params) => { onResize={(_, params) => {
const { width, height } = params; const { width, height } = params;
debouncedResize(width, height); debouncedResize(width, height);
@ -136,7 +140,7 @@ function NoteNode({
ref={nodeDiv} ref={nodeDiv}
className={cn( className={cn(
"relative flex h-full w-full flex-col gap-3 rounded-xl p-3", "relative flex h-full w-full flex-col gap-3 rounded-xl p-3",
"transition-all duration-200 ease-in-out", "duration-200 ease-in-out",
!isResizing && "transition-transform", !isResizing && "transition-transform",
COLOR_OPTIONS[bgColor] !== null && COLOR_OPTIONS[bgColor] !== null &&
`border ${!selected && "-z-50 shadow-sm"}`, `border ${!selected && "-z-50 shadow-sm"}`,
@ -145,13 +149,13 @@ function NoteNode({
{MemoNoteToolbarComponent} {MemoNoteToolbarComponent}
<div <div
style={{ style={{
width: size.width, width: "100%",
height: "100%", height: "100%",
display: "flex", display: "flex",
overflow: "hidden", overflow: "hidden",
}} }}
className={cn( className={cn(
"flex-1 transition-all duration-200 ease-in-out", "flex-1 duration-200 ease-in-out",
!isResizing && "transition-[width,height]", !isResizing && "transition-[width,height]",
)} )}
> >
@ -166,6 +170,7 @@ function NoteNode({
COLOR_OPTIONS[bgColor] === null COLOR_OPTIONS[bgColor] === null
? "dark:prose-invert" ? "dark:prose-invert"
: "dark:!text-background", : "dark:!text-background",
"min-w-full",
)} )}
style={{ backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000" }} style={{ backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000" }}
charLimit={CHAR_LIMIT} charLimit={CHAR_LIMIT}

2
src/frontend/src/constants/constants.ts
View file

@ -987,7 +987,7 @@ export const DRAG_EVENTS_CUSTOM_TYPESS = {
export const NOTE_NODE_MIN_WIDTH = 324; export const NOTE_NODE_MIN_WIDTH = 324;
export const NOTE_NODE_MIN_HEIGHT = 324; export const NOTE_NODE_MIN_HEIGHT = 324;
export const NOTE_NODE_MAX_HEIGHT = 800; export const NOTE_NODE_MAX_HEIGHT = 800;
export const NOTE_NODE_MAX_WIDTH = 600; export const NOTE_NODE_MAX_WIDTH = 1000;
export const COLOR_OPTIONS = { export const COLOR_OPTIONS = {
amber: "hsl(var(--note-amber))", amber: "hsl(var(--note-amber))",