From 83b65ea5fa52aa20d764e9212ee1b2a18b0e9858 Mon Sep 17 00:00:00 2001
From: Gabe Serna <gabriel.serna118@gmail.com>
Date: Fri, 15 Nov 2024 20:35:35 -0500
Subject: [PATCH] More Minor Adjustments

---
 app/audio/AudioForm.tsx            |  2 +-
 components/AudioMidiVisualizer.tsx | 10 +++++++---
 components/PianoRoll.tsx           |  2 ++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/audio/AudioForm.tsx b/app/audio/AudioForm.tsx
index 3248bec..07b4418 100644
--- a/app/audio/AudioForm.tsx
+++ b/app/audio/AudioForm.tsx
@@ -133,7 +133,7 @@ export default function AudioForm({
   }, [isSubmitting]);
 
   return (
-    <div className="flex h-max">
+    <div className="mb-20 flex h-max">
       <CSSTransition
         nodeRef={part1Ref}
         in={!isPart1Complete}
diff --git a/components/AudioMidiVisualizer.tsx b/components/AudioMidiVisualizer.tsx
index 929a541..88565e7 100644
--- a/components/AudioMidiVisualizer.tsx
+++ b/components/AudioMidiVisualizer.tsx
@@ -218,9 +218,13 @@ export default function AudioMidiVisualizer({
             isDemo={isDemo}
           />
         ) : (
-          <Skeleton className="mb-9 flex h-[300px] items-center justify-center rounded-2xl bg-accent text-card-foreground shadow-lg dark:shadow-stone-950 xl:h-[400px]">
-            Generating Midi...
-          </Skeleton>
+          <div>
+            <Skeleton className="flex h-[300px] items-center justify-center rounded-2xl bg-accent text-card-foreground shadow-lg dark:shadow-stone-950 xl:h-[400px]">
+              Generating Midi...
+            </Skeleton>
+            <div className="h-[42px]" />{" "}
+            {/* Compensate for button height + margin */}
+          </div>
         )}
       </div>
       <div className="mb-8 w-full rounded-2xl bg-accent p-4 shadow-lg">
diff --git a/components/PianoRoll.tsx b/components/PianoRoll.tsx
index 332e071..d62a0c9 100644
--- a/components/PianoRoll.tsx
+++ b/components/PianoRoll.tsx
@@ -382,6 +382,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
           {/* Piano Keys Container */}
           <div
             ref={pianoKeysContainerRef}
+            tabIndex={-1}
             className="piano-keys-container no-scrollbar overflow-y-hidden"
           >
             <canvas
@@ -394,6 +395,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
           {/* Notes Container */}
           <div
             ref={notesContainerRef}
+            tabIndex={-1}
             className="h-full w-full overflow-x-hidden overflow-y-scroll"
             onScroll={syncScroll}
           >