Arrange oscilloscope layout beside controls and shrink mini view on mobile

Move oscilloscope display to sit next to settings/controls (side-by-side layout) and make mini oscilloscope smaller on mobile to avoid blocking terminal and music icons, with updated responsive sizing.

X-Lovable-Edit-ID: edt-09ee86ef-59e1-4283-a96d-d4ea6abbe5cf

src/components/MiniOscilloscope.tsx

@@ -157,7 +157,7 @@ export function MiniOscilloscope() {
   return (
     <div 
       onClick={handleClick}
-      className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[400px] md:w-[600px] h-[80px] z-50 cursor-pointer group"
+      className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[200px] h-[50px] md:w-[600px] md:h-[80px] z-50 cursor-pointer group"
       title="Open Oscilloscope"
     >
       <div className="relative w-full h-full rounded-lg border border-primary/50 overflow-hidden bg-background/80 backdrop-blur-sm transition-all duration-300 group-hover:border-primary group-hover:shadow-[0_0_20px_hsl(var(--primary)/0.4)]">

src/components/Oscilloscope.tsx

@@ -247,7 +247,7 @@ export function Oscilloscope() {
   const canGenerate = audioData !== null && originalFile !== null && !isExporting && !isLoading;
 
   return (
-    <div className="space-y-6 max-w-6xl mx-auto">
+    <div className="space-y-6 max-w-7xl mx-auto">
       {/* Header */}
       <div className="text-center space-y-4">
         <h2 className="font-minecraft text-2xl md:text-3xl text-primary text-glow-strong">
@@ -258,15 +258,15 @@ export function Oscilloscope() {
         </p>
       </div>
 
-      {/* Controls Row */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Left Column: Audio Input */}
-        <div className="space-y-4">
+      {/* Audio Input Row */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+        <div className="flex-1 w-full sm:w-auto">
           <AudioUploader
             onFileSelect={handleFileSelect}
             isLoading={isLoading}
             fileName={fileName}
           />
+        </div>
 
         {/* Microphone Toggle */}
         <div className="flex items-center gap-4">
@@ -301,36 +301,10 @@ export function Oscilloscope() {
         </div>
       </div>
 
-        {/* Right Column: Control Panel */}
-        <OscilloscopeControls
-          mode={mode}
-          onModeChange={setMode}
-          canGenerate={canGenerate}
-          isGenerating={isExporting}
-          progress={progress}
-          exportedUrl={exportedUrl}
-          onGenerate={handleGenerate}
-          onReset={handleReset}
-          isPlaying={isPlaying}
-          onPreview={handlePreview}
-          canPreview={canPreview}
-          playbackSpeed={playbackSpeed}
-          onPlaybackSpeedChange={handlePlaybackSpeedChange}
-          isLooping={isLooping}
-          onLoopingChange={handleLoopingChange}
-          exportResolution={exportResolution}
-          onExportResolutionChange={handleExportResolutionChange}
-          exportFps={exportFps}
-          onExportFpsChange={handleExportFpsChange}
-          exportQuality={exportQuality}
-          onExportQualityChange={handleExportQualityChange}
-          liveSettings={liveSettings}
-          onLiveSettingsChange={setLiveSettings}
-        />
-      </div>
-
+      {/* Main Content: Display + Controls Side by Side */}
+      <div className="grid grid-cols-1 xl:grid-cols-[1fr_320px] gap-6">
         {/* Oscilloscope Display */}
-      <div className="flex justify-center flex-col items-center gap-4">
+        <div className="flex flex-col items-center gap-4 order-2 xl:order-1">
           <OscilloscopeDisplay
             audioData={audioData}
             micAnalyzer={micAnalyzer}
@@ -382,6 +356,37 @@ export function Oscilloscope() {
           )}
         </div>
 
+        {/* Control Panel */}
+        <div className="order-1 xl:order-2">
+          <OscilloscopeControls
+            mode={mode}
+            onModeChange={setMode}
+            canGenerate={canGenerate}
+            isGenerating={isExporting}
+            progress={progress}
+            exportedUrl={exportedUrl}
+            onGenerate={handleGenerate}
+            onReset={handleReset}
+            isPlaying={isPlaying}
+            onPreview={handlePreview}
+            canPreview={canPreview}
+            playbackSpeed={playbackSpeed}
+            onPlaybackSpeedChange={handlePlaybackSpeedChange}
+            isLooping={isLooping}
+            onLoopingChange={handleLoopingChange}
+            exportResolution={exportResolution}
+            onExportResolutionChange={handleExportResolutionChange}
+            exportFps={exportFps}
+            onExportFpsChange={handleExportFpsChange}
+            exportQuality={exportQuality}
+            onExportQualityChange={handleExportQualityChange}
+            liveSettings={liveSettings}
+            onLiveSettingsChange={setLiveSettings}
+          />
+        </div>
+      </div>
+
+
       {/* Microphone Calibration */}
       {showMicCalibration && isMicActive && (
         <div className="bg-card border border-border rounded-lg p-4 max-w-md mx-auto">