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/tests/layout-spacing.spec.ts

@@ -0,0 +1,82 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Masonry Grid Spacing', () => {
+    test('should have correct spacing between notes', async ({ page }) => {
+        // Go to home page
+        await page.goto('/');
+
+        // Create two notes to ensure we have content
+        await page.click('input[placeholder="Take a note..."]');
+        await page.fill('input[placeholder="Title"]', 'Note A');
+        await page.click('button:has-text("Add")');
+        await page.waitForTimeout(500);
+
+        await page.click('input[placeholder="Take a note..."]');
+        await page.fill('input[placeholder="Title"]', 'Note B');
+        await page.click('button:has-text("Add")');
+        await page.waitForTimeout(1000);
+
+        // Get the first two masonry items
+        const items = page.locator('.masonry-item');
+        const count = await items.count();
+        expect(count).toBeGreaterThanOrEqual(2);
+
+        const item1 = items.nth(0);
+        const item2 = items.nth(1);
+
+        // Get bounding boxes
+        const box1 = await item1.boundingBox();
+        const box2 = await item2.boundingBox();
+
+        if (!box1 || !box2) throw new Error('Could not get bounding boxes');
+
+        console.log('Box 1:', box1);
+        console.log('Box 2:', box2);
+
+        // Calculate horizontal distance between centers or edges?
+        // Assuming they are side-by-side in a multi-column layout on desktop
+
+        // Check viewport size
+        const viewport = page.viewportSize();
+        console.log('Viewport:', viewport);
+
+        if (viewport && viewport.width >= 1024) {
+            // Should be at least 2 columns
+            // Distance between left edges
+            const distance = Math.abs(box2.x - box1.x);
+            console.log('Distance betweeen left edges:', distance);
+
+            // Item width
+            console.log('Item 1 width:', box1.width);
+
+            // The visual gap depends on padding if we are using the padding strategy
+            // We can check the computed padding using evaluate
+            const padding = await item1.evaluate((el) => {
+                const style = window.getComputedStyle(el);
+                return style.padding;
+            });
+            console.log('Computed Padding:', padding);
+        }
+    });
+
+    test('should adjust columns on resize', async ({ page }) => {
+        await page.goto('/');
+        await page.waitForSelector('.masonry-item');
+
+        // Desktop
+        await page.setViewportSize({ width: 1280, height: 800 });
+        await page.waitForTimeout(1000);
+        let items = page.locator('.masonry-item');
+        let box1 = await items.nth(0).boundingBox();
+        console.log('1280px width - Item width:', box1?.width);
+
+        // Mobile
+        await page.setViewportSize({ width: 375, height: 667 });
+        await page.waitForTimeout(1000); // Wait for resize observer
+        items = page.locator('.masonry-item');
+        box1 = await items.nth(0).boundingBox();
+        console.log('375px width - Item width:', box1?.width);
+
+        // Calculate expectation logic here if needed
+    });
+});