More Minor Adjustments

gabe-serna · Nov 16, 2024 · 83b65ea · 83b65ea
1 parent 0cf5b76
commit 83b65ea
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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}
           >