fix(grid): repair muuri drag&drop and visual styles

- Fix Muuri integration: add data-draggable and improve DOM sync
- Fix Drag Visuals: remove opacity/rotation/scale in NoteCard and CSS to prevent 'gray/crooked' look
- Feat(layout): switch to padding-based spacing strategy (16px gap)
- Fix(css): correct media queries to maintain consistent spacing

keep-notes/config/masonry-layout.ts

@@ -69,8 +69,8 @@ export const DEFAULT_LAYOUT: MasonryLayoutConfig = {
     medium: { minHeight: 200, width: 240 },
     large: { minHeight: 300, width: 240 },
   },
-  gap: 10, // Tighter gap closer to Google Keep
-  gutter: 10,
+  gap: 24, // Further increased horizontal gap
+  gutter: 24,
 };
 
 /**
@@ -103,8 +103,9 @@ export function calculateColumns(width: number): number {
  * @returns Item width in pixels
  */
 export function calculateItemWidth(containerWidth: number, columns: number): number {
-  const { gap } = DEFAULT_LAYOUT;
-  return (containerWidth - (columns - 1) * gap) / columns;
+  // Return full column width
+  // Gaps are now handled by padding inside the masonry-item CSS
+  return containerWidth / columns;
 }
 
 /**