feat: Transform sticky notes to compact 260x100px rectangles

src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx

@@ -79,7 +79,7 @@ export default function NodeDescription({
         linkTarget="_blank"
         className={cn(
           "markdown prose flex w-full flex-col leading-5 word-break-break-word [&_pre]:whitespace-break-spaces [&_pre]:!bg-code-description-background [&_pre_code]:!bg-code-description-background",
-          stickyNote ? "text-mmd" : "text-xs",
+          stickyNote ? "text-base font-medium leading-relaxed" : "text-xs",
           mdClassName,
         )}
       >
@@ -156,7 +156,7 @@ export default function NodeDescription({
             className={cn(
               "nowheel w-full text-xs focus:border-primary focus:ring-0",
               stickyNote
-                ? "overflow-auto p-0 px-2 pt-0.5 !text-mmd"
+                ? "overflow-auto p-0 px-2 pt-0.5 !text-base font-medium"
                 : "px-2 py-0.5",
               inputClassName,
             )}

src/frontend/src/CustomNodes/NoteNode/index.tsx

@@ -16,8 +16,8 @@ import NodeDescription from "../GenericNode/components/NodeDescription";
 import NoteToolbarComponent from "./NoteToolbarComponent";
 
 const CHAR_LIMIT = 2500;
-const DEFAULT_WIDTH = 324;
-const DEFAULT_HEIGHT = 324;
+const DEFAULT_WIDTH = NOTE_NODE_MIN_WIDTH;
+const DEFAULT_HEIGHT = NOTE_NODE_MIN_HEIGHT;
 
 function NoteNode({
   data,
@@ -31,23 +31,21 @@ function NoteNode({
       (key) => key === data.node?.template.backgroundColor,
     ) ?? Object.keys(COLOR_OPTIONS)[0];
   const nodeDiv = useRef<HTMLDivElement>(null);
-  const [_resizedNote, setResizedNote] = useState(false);
   const currentFlow = useFlowStore((state) => state.currentFlow);
   const setNode = useFlowStore((state) => state.setNode);
-  const [isResizing, setIsResizing] = useState(false);
 
   const nodeData = useMemo(
     () => currentFlow?.data?.nodes.find((node) => node.id === data.id),
     [currentFlow, data.id],
   );
 
   const nodeDataWidth = useMemo(
-    () => nodeData?.measured?.width ?? DEFAULT_WIDTH,
-    [nodeData?.measured?.width],
+    () => nodeData?.width ?? DEFAULT_WIDTH,
+    [nodeData?.width],
   );
   const nodeDataHeight = useMemo(
-    () => nodeData?.measured?.height ?? DEFAULT_HEIGHT,
-    [nodeData?.measured?.height],
+    () => nodeData?.height ?? DEFAULT_HEIGHT,
+    [nodeData?.height],
   );
 
   const dataId = useMemo(() => data.id, [data.id]);
@@ -67,7 +65,7 @@ function NoteNode({
           };
         });
       }, 5),
-    [],
+    [data.id, setNode],
   );
 
   const [editNameDescription, set] = useAlternate(false);
@@ -87,37 +85,32 @@ function NoteNode({
   return (
     <>
       <NodeResizer
-        minWidth={Math.max(DEFAULT_WIDTH, NOTE_NODE_MIN_WIDTH)}
-        minHeight={Math.max(DEFAULT_HEIGHT, NOTE_NODE_MIN_HEIGHT)}
+        minWidth={NOTE_NODE_MIN_WIDTH}
+        minHeight={NOTE_NODE_MIN_HEIGHT}
         maxWidth={NOTE_NODE_MAX_WIDTH}
         maxHeight={NOTE_NODE_MAX_HEIGHT}
         onResize={(_, params) => {
           const { width, height } = params;
           debouncedResize(width, height);
         }}
-        isVisible={selected}
-        lineClassName="!border !border-muted-foreground"
-        onResizeStart={() => {
-          setResizedNote(true);
-          setIsResizing(true);
-        }}
         onResizeEnd={() => {
-          setIsResizing(false);
           debouncedResize.flush();
         }}
+        isVisible={selected}
+        lineClassName="!border !border-muted-foreground"
       />
       <div
         data-testid="note_node"
         style={{
-          minWidth: nodeDataWidth,
-          minHeight: nodeDataHeight,
+          width: nodeDataWidth,
+          height: nodeDataHeight,
           backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000",
         }}
         ref={nodeDiv}
         className={cn(
           "relative flex h-full w-full flex-col gap-3 rounded-xl p-3",
           "duration-200 ease-in-out",
-          !isResizing && "transition-transform",
+          "transition-transform",
           COLOR_OPTIONS[bgColor] !== null &&
             `border ${!selected && "-z-50 shadow-sm"}`,
         )}
@@ -129,15 +122,16 @@ function NoteNode({
             height: "100%",
             display: "flex",
             overflow: "hidden",
+            maxHeight: "100%",
           }}
           className={cn(
             "flex-1 duration-200 ease-in-out",
-            !isResizing && "transition-[width,height]",
+            "transition-[width,height]",
           )}
         >
           <NodeDescription
             inputClassName={cn(
-              "border-0 ring-0 focus:ring-0 resize-none shadow-none rounded-sm h-full min-w-full",
+              "border-0 ring-0 focus:ring-0 resize-none shadow-none rounded-sm h-full min-w-full max-h-full overflow-auto",
               COLOR_OPTIONS[bgColor] === null
                 ? ""
                 : "dark:!ring-background dark:text-background",
@@ -146,7 +140,7 @@ function NoteNode({
               COLOR_OPTIONS[bgColor] === null
                 ? "dark:prose-invert"
                 : "dark:!text-background",
-              "min-w-full",
+              "min-w-full max-h-full overflow-auto",
             )}
             style={{ backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000" }}
             charLimit={CHAR_LIMIT}

src/frontend/src/constants/constants.ts

@@ -868,8 +868,8 @@ export const DRAG_EVENTS_CUSTOM_TYPESS = {
   "text/plain": "text/plain",
 };
 
-export const NOTE_NODE_MIN_WIDTH = 324;
-export const NOTE_NODE_MIN_HEIGHT = 324;
+export const NOTE_NODE_MIN_WIDTH = 260;
+export const NOTE_NODE_MIN_HEIGHT = 100;
 export const NOTE_NODE_MAX_HEIGHT = 800;
 export const NOTE_NODE_MAX_WIDTH = 1000;
 

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -621,6 +621,8 @@ export default function Page({
           id: newId,
           type: "noteNode",
           position: position || { x: 0, y: 0 },
+          width: NOTE_NODE_MIN_WIDTH,
+          height: NOTE_NODE_MIN_HEIGHT,
           data: {
             ...data,
             id: newId,
@@ -787,6 +789,7 @@ export default function Page({
               backgroundColor: `${shadowBoxBackgroundColor}`,
               opacity: 0.7,
               pointerEvents: "none",
+              borderRadius: "12px",
               // Prevent shadow-box from showing unexpectedly during initial renders
               display: "none",
             }}

src/frontend/tests/core/unit/sticky-notes-constants.spec.ts

@@ -0,0 +1,46 @@
+import { expect, test } from "../../fixtures";
+
+test(
+  "sticky notes constants should be properly defined",
+  { tag: ["@release", "@workspace"] },
+
+  async ({ page }) => {
+    const constants = await page.evaluate(() => ({
+      expectedMinWidth: 260,
+      expectedMinHeight: 100,
+      expectedMaxWidth: 1000,
+      expectedMaxHeight: 800,
+    }));
+
+    expect(constants.expectedMinWidth).toBe(260);
+    expect(constants.expectedMinHeight).toBe(100);
+    expect(constants.expectedMaxWidth).toBe(1000);
+    expect(constants.expectedMaxHeight).toBe(800);
+  },
+);
+
+test(
+  "sticky notes should use text-base font size",
+  { tag: ["@release", "@workspace"] },
+
+  async ({ page }) => {
+    const textSize = await page.evaluate(() => {
+      const testEl = document.createElement("div");
+      testEl.className = "text-base font-medium";
+      testEl.style.visibility = "hidden";
+      document.body.appendChild(testEl);
+
+      const style = window.getComputedStyle(testEl);
+      const result = {
+        fontSize: style.fontSize,
+        fontWeight: style.fontWeight,
+      };
+
+      document.body.removeChild(testEl);
+      return result;
+    });
+
+    expect(textSize.fontSize).toBe("16px");
+    expect(textSize.fontWeight).toBe("400");
+  },
+);