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/components/masonry-grid.css

@@ -8,14 +8,8 @@
 /* Masonry Container */
 .masonry-container {
   width: 100%;
-  padding: 0 16px 24px 16px;
-}
-
-/* Grid containers for pinned and others sections */
-.masonry-container > div > div[ref*="GridRef"] {
-  width: 100%;
-  min-height: 100px;
-  position: relative;
+  /* Reduced to compensate for item padding */
+  padding: 0 20px 40px 20px;
 }
 
 /* Masonry Item Base Styles - Width is managed by Muuri */
@@ -24,8 +18,8 @@
   position: absolute;
   z-index: 1;
   box-sizing: border-box;
-  padding: 8px 0;
-  width: auto; /* Width will be set by JS based on container */
+  padding: 8px;
+  /* 8px * 2 = 16px gap (Tighter spacing) */
 }
 
 /* Masonry Item Content Wrapper */
@@ -44,39 +38,38 @@
 
 /* Note Card - Base styles */
 .note-card {
-  width: 100% !important; /* Force full width within grid cell */
-  min-width: 0; /* Prevent overflow */
-  height: auto !important; /* Let content determine height like Google Keep */
-  max-height: none !important; /* No max-height restriction */
+  width: 100% !important;
+  /* Force full width within grid cell */
+  min-width: 0;
+  /* Prevent overflow */
 }
 
 /* Note Size Styles - Desktop Default */
 .note-card[data-size="small"] {
   min-height: 150px !important;
-  height: auto !important;
 }
 
 .note-card[data-size="medium"] {
   min-height: 200px !important;
-  height: auto !important;
 }
 
 .note-card[data-size="large"] {
   min-height: 300px !important;
-  height: auto !important;
 }
 
-/* Drag State Styles - Improved for Google Keep-like behavior */
+/* Drag State Styles - Clean and flat behavior requested by user */
 .masonry-item.muuri-item-dragging {
   z-index: 1000;
-  opacity: 0.6;
-  transition: none; /* No transition during drag for better performance */
+  opacity: 1 !important;
+  /* Force opacity to 100% */
+  transition: none;
 }
 
 .masonry-item.muuri-item-dragging .note-card {
-  transform: scale(1.05) rotate(2deg);
-  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
-  transition: none; /* No transition during drag */
+  transform: none !important;
+  /* Force "straight" - no rotation, no scale */
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  transition: none;
 }
 
 .masonry-item.muuri-item-releasing {
@@ -122,29 +115,27 @@
 /* Mobile Styles (< 640px) */
 @media (max-width: 639px) {
   .masonry-container {
-    padding: 0 12px 16px 12px;
+    padding: 0 20px 16px 20px;
   }
-  
+
   .masonry-item {
-    padding: 6px 0;
-  }
-  
-  /* Smaller note sizes on mobile - keep same ratio */
-  .note-card[data-size="small"] {
-    min-height: 120px !important;
-    height: auto !important;
+    padding: 8px;
+    /* 16px gap on mobile */
   }
 
-  .note-card[data-size="medium"] {
-    min-height: 160px !important;
-    height: auto !important;
+  /* Smaller note sizes on mobile */
+  .masonry-item-content .note-card[data-size="small"] {
+    min-height: 120px;
   }
 
-  .note-card[data-size="large"] {
-    min-height: 240px !important;
-    height: auto !important;
+  .masonry-item-content .note-card[data-size="medium"] {
+    min-height: 160px;
   }
-  
+
+  .masonry-item-content .note-card[data-size="large"] {
+    min-height: 240px;
+  }
+
   /* Reduced drag effect on mobile */
   .masonry-item.muuri-item-dragging .note-card {
     transform: scale(1.01);
@@ -155,31 +146,36 @@
 /* Tablet Styles (640px - 1023px) */
 @media (min-width: 640px) and (max-width: 1023px) {
   .masonry-container {
-    padding: 0 16px 20px 16px;
+    padding: 0 24px 20px 24px;
   }
-  
+
   .masonry-item {
-    padding: 8px 0;
+    padding: 8px;
+    /* 16px gap */
   }
 }
 
 /* Desktop Styles (1024px - 1279px) */
 @media (min-width: 1024px) and (max-width: 1279px) {
   .masonry-container {
-    padding: 0 20px 24px 20px;
+    padding: 0 28px 24px 28px;
+  }
+
+  .masonry-item {
+    padding: 8px;
   }
 }
 
 /* Large Desktop Styles (1280px+) */
 @media (min-width: 1280px) {
   .masonry-container {
-    padding: 0 24px 32px 24px;
-    /* max-width removed for infinite columns */
-    width: 100%;
+    padding: 0 28px 32px 28px;
+    max-width: 1600px;
+    margin: 0 auto;
   }
-  
+
   .masonry-item {
-    padding: 10px 0;
+    padding: 8px;
   }
 }
 
@@ -204,12 +200,13 @@ body.muuri-dragging {
 
 /* Optimize for reduced motion */
 @media (prefers-reduced-motion: reduce) {
+
   .masonry-item,
   .masonry-item-content,
   .note-card {
     transition: none;
   }
-  
+
   .masonry-item.muuri-item-dragging .note-card {
     transform: none;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
@@ -218,13 +215,14 @@ body.muuri-dragging {
 
 /* Print styles */
 @media print {
+
   .masonry-item.muuri-item-dragging,
   .muuri-item-placeholder {
     display: none !important;
   }
-  
+
   .masonry-item {
     break-inside: avoid;
     page-break-inside: avoid;
   }
-}
+}