From 4a4faa5b5efe3025c40084f155461c979d7f0b11 Mon Sep 17 00:00:00 2001
From: aarbit <aarbit@gmail.com>
Date: Wed, 12 Feb 2025 09:55:27 -0600
Subject: [PATCH] Cleans up MIDI settings look

---
 src/App.css |  5 +++++
 src/App.tsx | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 1075afe..663636f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -58,4 +58,9 @@
 
 .unselected {
   font-size: medium;
+}
+
+.midi-settings-container {
+  display: grid;
+  grid-template-columns: auto auto;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index aade763..2a02f64 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -72,7 +72,9 @@ function App() {
 
   function pause(milliseconds: number) {
     const futureTime = new Date().getTime() + milliseconds;
-    while (futureTime >= new Date().getTime()) {}
+    while (futureTime >= new Date().getTime()) {
+      // Intentionally left blank because it's just pausing.
+    }
   }
 
   const bankList = makeList(10)
@@ -113,8 +115,16 @@ function App() {
 
   return (
     <>
-      <select onChange={handleMidiDeviceSelect}>{midiDeviceOptions()}</select>
-      <select onChange={handleMidiChannelSelect}>{midiChannelOptions()}</select>
+      <div className={"midi-settings-container"}>
+        <div>MIDI DEVICE</div>
+        <div>MIDI CHANNEL</div>
+        <div>
+          <select onChange={handleMidiDeviceSelect}>{midiDeviceOptions()}</select>
+        </div>
+        <div>
+          <select onChange={handleMidiChannelSelect}>{midiChannelOptions()}</select>
+        </div>
+      </div>
       <div>
         PATCH:
       </div>