From 4c285b91a51ac0be5e3f986fa8a2895bd0a6984f Mon Sep 17 00:00:00 2001
From: Peter Prince <github@pcprince.co.uk>
Date: Wed, 28 Aug 2024 14:04:07 +0100
Subject: [PATCH] Rework spacing

---
 js/songClips.js |  2 --
 play.html       | 10 +++++-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/js/songClips.js b/js/songClips.js
index 8f5acb6..ede16f6 100644
--- a/js/songClips.js
+++ b/js/songClips.js
@@ -299,10 +299,8 @@ function createSongUI () {
 
         const clipCol = document.createElement('div');
         clipCol.classList.add('col');
-        clipCol.style.paddingLeft = '10%';
 
         const playClipButton = document.createElement('button');
-        // playClipButton.textContent = `Play ${index + 1}`;
         playClipButton.innerHTML = '<img class="button-icon" src="./images/play-fill.svg" alt="Bootstrap">';
         playClipButton.classList.add('playback-button', 'btn', 'btn-secondary', 'play-clip-button');
         playClipButton.id = `play-clip-button${index}`;
diff --git a/play.html b/play.html
index 90793f6..181d648 100644
--- a/play.html
+++ b/play.html
@@ -224,7 +224,7 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Paused</h1>
             </div>
         </div>
 
-        <div class="row" style="margin-top: 5px;">
+        <div class="row">
             <div class="col" style="text-align: center;">
                 <span class="playing-span" style="font-weight: bold;">Playing: </span>
                 <span id="clip-number-span" class="playing-span" style="width: 26px; display: inline-block; text-align: center;">-</span>
@@ -252,20 +252,20 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Paused</h1>
             </div>
         </div>
 
-        <div class="row" style="margin-top: 7px;">
+        <div class="row">
             <div class="col" style="text-align: center;">
                 <input type="checkbox" id="skip-guessed-checkbox"><label id="skip-guessed-checkbox-label" for="skip-guessed-checkbox" style="margin-left: 5px; color: grey; font-size: small;">Skip correct guesses</label>
             </div>
         </div>
 
-        <div class="row" style="margin-top: 7px;">
+        <div class="row" style="margin-top: 3px;">
             <div class="col" style="text-align: center;">
-                <input id="guess-input" style="width: 500px; font-size: large;" disabled>
+                <input id="guess-input" style="width: 40%; font-size: large;" disabled>
                 <button class="btn btn-danger" id="help-button" disabled style="height: 33px; padding-top: 3px; vertical-align: top;">Help</button>
             </div>
         </div>
 
-        <div class="row" style="margin-top: 7px;" id="song-ui-container"></div>
+        <div class="row" style="margin-top: 7px; padding-left: 20px; padding-right: 20px;" id="song-ui-container"></div>
 
     </div>