Tune pinboard styling and Muuri-driven dynamic item widths

public/assets/pinboard.js

@@ -44,6 +44,25 @@
     layoutEasing: 'ease',
   });
 
+  const toPx = (value) => {
+    const parsed = Number.parseFloat(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  };
+
+  const updateItemWidths = () => {
+    const boardStyles = window.getComputedStyle(board);
+    const boardWidth = board.clientWidth;
+    const gap = toPx(boardStyles.getPropertyValue('--pin-gap')) || 20;
+    const minItemWidth = 260;
+
+    const columns = Math.max(1, Math.floor((boardWidth + gap) / (minItemWidth + gap)));
+    const itemWidth = Math.max(220, Math.floor((boardWidth - (columns - 1) * gap) / columns));
+
+    ordered.forEach((note) => {
+      note.style.width = `${itemWidth}px`;
+    });
+  };
+
   const bringToFront = (note) => {
     zCounter += 1;
     note.style.zIndex = String(zCounter);
@@ -59,6 +78,7 @@
   });
 
   const relayout = () => {
+    updateItemWidths();
     grid.refreshItems().layout();
   };