feat: improve layout of SequencerCanvas and SequencerPage for better responsiveness and overflow handling

src/components/sequencer/SequencerCanvas.tsx

@@ -127,12 +127,11 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem,
         ref={setDropRef}
         id={`track-${track.id}`}
         className={`
-          w-full h-full border-b border-border/50
+          h-full border-b border-border/50
           relative overflow-hidden
           ${isOver ? 'bg-accent/30' : 'bg-muted/10'}
           transition-colors
         `}
-        style={{ minWidth: `${totalWidth}px` }}
       >
         {/* Grid lines for time markers */}
         <div className="absolute inset-0 pointer-events-none">
@@ -274,26 +273,24 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
       </div>
 
       {/* Tracks */}
-      <div className="flex-1 overflow-hidden">
+      <div 
-        <div 
+        ref={ref}
-          ref={ref}
+        className="flex-1 min-h-0 min-w-0 overflow-auto"
-          className="w-full h-full overflow-auto"
+        onScroll={handleTracksScroll}
-          onScroll={handleTracksScroll}
+      >
-        >
+        <div style={{ width: `${totalWidth}px`, minWidth: `${totalWidth}px` }}>
-          <div style={{ minWidth: `${totalWidth}px` }}>
+          {tracks.map((track) => (
-            {tracks.map((track) => (
+            <TrackRow
-              <TrackRow
+              key={track.id}
-                key={track.id}
+              track={track}
-                track={track}
+              duration={duration}
-                duration={duration}
+              zoom={zoom}
-                zoom={zoom}
+              isPlaying={isPlaying}
-                isPlaying={isPlaying}
+              currentTime={currentTime}
-                currentTime={currentTime}
+              draggedItem={draggedItem}
-                draggedItem={draggedItem}
+              dragOverInfo={dragOverInfo}
-                dragOverInfo={dragOverInfo}
+            />
-              />
+          ))}
-            ))}
-          </div>
         </div>
       </div>
     </div>

src/pages/SequencerPage.tsx

@@ -337,7 +337,7 @@ export function SequencerPage() {
               </div>
 
               {/* Sequencer Canvas */}
-              <div className="flex-1">
+              <div className="flex-1 min-w-0 overflow-hidden">
                 <SequencerCanvas
                   ref={sequencerCanvasRef}
                   tracks={state.tracks}