fix: dynamic sizing for sequencer and piano roll modules

Module width now adapts to step/bar count so extra steps are never
hidden. Sequencer width scales with numSteps, piano roll width scales
with bar count using a fixed BEAT_PX density.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ModuleNode.jsx

@@ -8,6 +8,20 @@ import KeyboardWidget from './KeyboardWidget.jsx';
 import SequencerWidget from './SequencerWidget.jsx';
 import PianoRollWidget from './PianoRollWidget.jsx';
 
+// Dynamic module widths for sequencer/pianoroll based on step/bar count
+function getModuleWidth(mod, type) {
+  if (type === 'sequencer') {
+    const numSteps = parseInt(mod?.params?.steps || '16');
+    return Math.max(200, numSteps * 18 + 20); // CELL_W=18 + padding
+  }
+  if (type === 'pianoroll') {
+    const bars = parseInt(mod?.params?.bars || '4');
+    const totalBeats = bars * 4;
+    return 24 + totalBeats * 30 + 20; // KEY_W + beats*BEAT_PX + padding
+  }
+  return undefined;
+}
+
 // Map input port names → the param name they modulate (for visual feedback)
 const PORT_TO_PARAM = {
   filter:     { cutoff: 'frequency' },
@@ -150,7 +164,7 @@ export default function ModuleNode({ mod, zoom, onStartConnect, onPortPosition }
       style={{
         left: mod.x * zoom, top: mod.y * zoom,
         transform: `scale(${zoom})`, transformOrigin: 'top left',
-        ...(mod.type === 'pianoroll' ? { width: 520 } : mod.type === 'sequencer' ? { width: 310 } : {}),
+        ...(mod.type === 'pianoroll' ? { width: getModuleWidth(mod, 'pianoroll') } : mod.type === 'sequencer' ? { width: getModuleWidth(mod, 'sequencer') } : {}),
       }}
       data-module-id={mod.id}
       onPointerDown={(e) => {