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
+    startTransition(async () => {
-    onSizeChange?.(size)
+      // Instant visual feedback for the card itself
+      addOptimisticNote({ size })
 
-    // Trigger layout refresh
+      // Notify parent so it can update its local state
-    onResize?.()
+      onSizeChange?.(size)
-    setTimeout(() => onResize?.(), 300)
 
-    // Update server in background
+      // Trigger layout refresh
-    updateSize(note.id, size)
+      onResize?.()
+      setTimeout(() => onResize?.(), 300)
+
+      // Update server in background
+      await updateSize(note.id, size)
+      router.refresh()
+    })
   }
 
   const handleCheckItem = async (checkItemId: string) => {

keep-notes/playwright-report/index.html

@@ -82,4 +82,4 @@ Error generating stack: `+n.message+`
     <div id='root'></div>
   </body>
 </html>
-<script id="playwrightReportBase64" type="application/zip">data:application/zip;base64,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</script>
+<script id="playwrightReportBase64" type="application/zip">data:application/zip;base64,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</script>