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,13 +273,12 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
       </div>
 
       {/* Tracks */}
-      <div className="flex-1 overflow-hidden">
       <div 
         ref={ref}
-          className="w-full h-full overflow-auto"
+        className="flex-1 min-h-0 min-w-0 overflow-auto"
         onScroll={handleTracksScroll}
       >
-          <div style={{ minWidth: `${totalWidth}px` }}>
+        <div style={{ width: `${totalWidth}px`, minWidth: `${totalWidth}px` }}>
           {tracks.map((track) => (
             <TrackRow
               key={track.id}
@@ -296,7 +294,6 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
         </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}