Fix syntax error and finalize robust note resizing

keep-notes/components/masonry-grid.css

@@ -48,19 +48,16 @@
 .masonry-item[data-size="small"],
 .note-card[data-size="small"] {
   min-height: 150px;
-  height: auto !important;
 }
 
 .masonry-item[data-size="medium"],
 .note-card[data-size="medium"] {
   min-height: 200px;
-  height: auto !important;
 }
 
 .masonry-item[data-size="large"],
 .note-card[data-size="large"] {
   min-height: 300px;
-  height: auto !important;
 }
 
 /* Drag State Styles - Clean and flat behavior requested by user */
@@ -133,19 +130,16 @@
   .masonry-item[data-size="small"],
   .masonry-item-content .note-card[data-size="small"] {
     min-height: 120px;
-    height: auto !important;
   }
 
   .masonry-item[data-size="medium"],
   .masonry-item-content .note-card[data-size="medium"] {
     min-height: 160px;
-    height: auto !important;
   }
 
   .masonry-item[data-size="large"],
   .masonry-item-content .note-card[data-size="large"] {
     min-height: 240px;
-    height: auto !important;
   }
 
   /* Reduced drag effect on mobile */

keep-notes/components/masonry-grid.tsx

@@ -26,18 +26,23 @@ interface MasonryItemProps {
   isDragging?: boolean;
 }
 
-const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onNoteSizeChange, onDragStart, onDragEnd, isDragging }: MasonryItemProps) {
+const MasonryItem = function MasonryItem({ note, onEdit, onResize, onNoteSizeChange, onDragStart, onDragEnd, isDragging }: MasonryItemProps) {
   const resizeRef = useResizeObserver(onResize);
 
+  useEffect(() => {
+    onResize();
+    const timer = setTimeout(onResize, 300);
+    return () => clearTimeout(timer);
+  }, [note.size, onResize]);
+
   return (
     <div
       className="masonry-item absolute py-1"
       data-id={note.id}
       data-size={note.size}
       data-draggable="true"
-      ref={resizeRef as any}
     >
-      <div className="masonry-item-content relative">
+      <div className="masonry-item-content relative" ref={resizeRef as any}>
         <NoteCard
           note={note}
           onEdit={onEdit}
@@ -50,7 +55,7 @@ const MasonryItem = memo(function MasonryItem({ note, onEdit, onResize, onNoteSi
       </div>
     </div>
   );
-});
+};
 
 export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
   const { t } = useLanguage();
@@ -354,7 +359,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
           <div ref={pinnedGridRef} className="relative min-h-[100px]">
             {pinnedNotes.map(note => (
               <MasonryItem
-                key={`${note.id}-${note.size}`}
+                key={note.id}
                 note={note}
                 onEdit={handleEdit}
                 onResize={refreshLayout}
@@ -376,7 +381,7 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
           <div ref={othersGridRef} className="relative min-h-[100px]">
             {othersNotes.map(note => (
               <MasonryItem
-                key={`${note.id}-${note.size}`}
+                key={note.id}
                 note={note}
                 onEdit={handleEdit}
                 onResize={refreshLayout}

keep-notes/components/note-actions.tsx

@@ -111,7 +111,7 @@ export function NoteActions({
               {(['small', 'medium', 'large'] as const).map((size) => (
                 <DropdownMenuItem
                   key={size}
-                  onClick={(e) => {
+                  onSelect={(e) => {
                     onSizeChange?.(size);
                   }}
                   className={cn(

keep-notes/components/note-card.tsx

@@ -237,15 +237,21 @@ export function NoteCard({
   }
 
   const handleSizeChange = async (size: 'small' | 'medium' | 'large') => {
-    // Notify parent of size change so it can update its state
-    onSizeChange?.(size)
+    startTransition(async () => {
+      // Instant visual feedback for the card itself
+      addOptimisticNote({ size })
 
-    // Trigger layout refresh
-    onResize?.()
-    setTimeout(() => onResize?.(), 300)
+      // Notify parent so it can update its local state
+      onSizeChange?.(size)
 
-    // Update server in background
-    updateSize(note.id, size)
+      // Trigger layout refresh
+      onResize?.()
+      setTimeout(() => onResize?.(), 300)
+
+      // Update server in background
+      await updateSize(note.id, size)
+      router.refresh()
+    })
   }
 
   const handleCheckItem = async (checkItemId: string) => {