diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css index 5db51f352..167ee66ba 100644 --- a/src/frontend/src/App.css +++ b/src/frontend/src/App.css @@ -19,7 +19,6 @@ body { } .react-flow__node { - width: fit-content !important; height: auto; border-radius: auto; min-width: inherit; diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index 2c1a75a3b..3142d7064 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx @@ -155,7 +155,7 @@ export default function NodeDescription({ maxLength={charLimit} className={cn( "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, )} autoFocus diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx index 6c3a66fcb..615cc8492 100644 --- a/src/frontend/src/CustomNodes/NoteNode/index.tsx +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -1,5 +1,7 @@ import { COLOR_OPTIONS, + NOTE_NODE_MAX_HEIGHT, + NOTE_NODE_MAX_WIDTH, NOTE_NODE_MIN_HEIGHT, NOTE_NODE_MIN_WIDTH, } from "@/constants/constants"; @@ -111,6 +113,8 @@ function NoteNode({ { const { width, height } = params; debouncedResize(width, height); @@ -136,7 +140,7 @@ function NoteNode({ ref={nodeDiv} className={cn( "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", COLOR_OPTIONS[bgColor] !== null && `border ${!selected && "-z-50 shadow-sm"}`, @@ -145,13 +149,13 @@ function NoteNode({ {MemoNoteToolbarComponent}
@@ -166,6 +170,7 @@ function NoteNode({ COLOR_OPTIONS[bgColor] === null ? "dark:prose-invert" : "dark:!text-background", + "min-w-full", )} style={{ backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000" }} charLimit={CHAR_LIMIT} diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index f39a0623d..fa4d8e263 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -987,7 +987,7 @@ export const DRAG_EVENTS_CUSTOM_TYPESS = { export const NOTE_NODE_MIN_WIDTH = 324; export const NOTE_NODE_MIN_HEIGHT = 324; 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 = { amber: "hsl(var(--note-amber))",