From 18ff98796eb0710f02273a167c0bba1f7cdea66d Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sat, 7 Oct 2023 17:25:55 +0200
Subject: [PATCH] fixing CSS

---
 index.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 82e1aa0..ad692e1 100644
--- a/index.html
+++ b/index.html
@@ -213,7 +213,7 @@
                   <input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                 </div>
                 <label for="font" class="block ml-5 mb-2 font-medium">Font (<b>TODO</b>):</label>
-                  <select id="font-family" class="bg-gray-50 w-48 ml-4 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
+                  <select id="font-family" class="bg-gray-50 w-11/12 ml-4 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
                     <option selected>Choose a font</option>
                     <option value="US">IBM Plex Mono</option>
                     <option value="CA">Victor Mono</option>
@@ -270,8 +270,9 @@
           </div>
 
             <!-- Midi settings -->
-            <div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-row mr-4 ml-4">
+            <div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-row mx-4 my-4 pt-4">
             <div class="flex flex-row">
+            <p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
               <div class="flex items-center mb-4 ml-6">
                 <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock:&nbsp;</label>
                 <select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
@@ -285,7 +286,7 @@
                   <option value="48">48</option>
                 </select>
               </div>
-              <div class="flex items-center mb-4 ml-20">
+              <div class="flex items-center mb-4 ml-6">
                   <input id="send-midi-clock" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                   <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Send MIDI Clock</label>
               </div>
@@ -297,7 +298,7 @@
                   <option value="-1">None</option>
                 </select>
               </div>
-              <div class="flex items-center mb-4 ml-20">
+              <div class="flex items-center mb-4 ml-6">
                 <input id="midi-channels-scripts" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                 <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Route channels to scripts</label>
               </div>