feat: enhance AppLayout and SequencerPage for improved layout and responsiveness

src/pages/SequencerPage.tsx

@@ -2,7 +2,6 @@ import { TrackControls } from '@/components/sequencer/TrackControls'
 import { TimelineControls } from '@/components/sequencer/TimelineControls'
 import { SoundLibrary } from '@/components/sequencer/SoundLibrary'
 import { SequencerCanvas } from '@/components/sequencer/SequencerCanvas'
-import { AppLayout } from '@/components/AppLayout'
 import { DndContext, type DragEndEvent, type DragStartEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
 import { useState, useRef, useCallback, useEffect } from 'react'
 
@@ -285,24 +284,23 @@ export function SequencerPage() {
   }, [state.isPlaying, state.duration])
 
   return (
-    <AppLayout 
-      breadcrumb={{
-        items: [
-          { label: 'Home', href: '/' },
-          { label: 'Sequencer' }
-        ]
-      }}
-    >
-      <div className="h-full flex flex-col">
-        {/* Main Content */}
-        <div className="flex-1 flex overflow-hidden">
+    <div className="h-screen w-screen flex flex-col overflow-hidden">
+      {/* Simple Header */}
+      <div className="h-12 bg-background border-b flex items-center px-4 flex-shrink-0">
+        <a href="/" className="text-sm text-muted-foreground hover:text-foreground">Home</a>
+        <span className="mx-2 text-muted-foreground">/</span>
+        <span className="text-sm font-medium">Sequencer</span>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
         <DndContext
           sensors={sensors}
           onDragStart={handleDragStart}
           onDragEnd={handleDragEnd}
         >
           {/* Left Sidebar - Sound Library */}
-          <div className="w-80 border-r bg-muted/30 flex flex-col">
+          <div className="w-64 border-r bg-muted/30 flex flex-col flex-shrink-0">
             <div className="p-4 h-full">
               <SoundLibrary />
             </div>
@@ -325,7 +323,7 @@ export function SequencerPage() {
             {/* Track Area */}
             <div className="flex-1 flex overflow-hidden">
               {/* Track Controls */}
-              <div className="w-40 border-r">
+              <div className="w-32 border-r flex-shrink-0">
                 <TrackControls
                   ref={trackControlsRef}
                   tracks={state.tracks}
@@ -337,7 +335,7 @@ export function SequencerPage() {
               </div>
 
               {/* Sequencer Canvas */}
-              <div className="flex-1 min-w-0 overflow-hidden">
+              <div className="flex-1 overflow-hidden">
                 <SequencerCanvas
                   ref={sequencerCanvasRef}
                   tracks={state.tracks}
@@ -353,8 +351,7 @@ export function SequencerPage() {
             </div>
           </div>
         </DndContext>
-        </div>
       </div>
-    </AppLayout>
+    </div>
   )
 }