Fixed the /oscilloscope view to show the correct fields at right locations

src/components/AudioUploader.tsx

@@ -31,7 +31,7 @@ export function AudioUploader({ onFileSelect, isLoading, fileName }: AudioUpload
   return (
     <div
       className={cn(
-        "relative border-2 border-dashed border-primary/40 rounded-lg p-8 text-center",
+        "relative border-2 border-dashed border-primary/40 rounded-lg py-24 px-8 text-center",
         "hover:border-primary/70 transition-all duration-300 cursor-pointer",
         "bg-secondary/20 hover:bg-secondary/30",
         isLoading && "opacity-50 pointer-events-none"

src/components/Oscilloscope.tsx

@@ -279,7 +279,15 @@ export function Oscilloscope() {
             onSeek={handleSeek}
             liveSettings={liveSettings}
           />
-          
+          {/* Audio Uploader - below controls on desktop */}
+          <div className="w-full mt-4">
+            <AudioUploader
+              onFileSelect={handleFileSelect}
+              isLoading={isLoading}
+              fileName={fileName}
+            />
+          </div>
+ 
           {/* Audio Playback Controls */}
           {audioData && originalFile && (
             <div className="w-full max-w-3xl space-y-2 px-4">
@@ -344,14 +352,6 @@ export function Oscilloscope() {
             onToggleMic={toggleMic}
           />
           
-          {/* Audio Uploader - below controls on desktop */}
-          <div className="mt-4">
-            <AudioUploader
-              onFileSelect={handleFileSelect}
-              isLoading={isLoading}
-              fileName={fileName}
-            />
-          </div>
         </div>
       </div>
 
@@ -466,4 +466,4 @@ export function Oscilloscope() {
       )}
     </div>
   );
-}
+}