Fix a few small issues and add doc strings to the JS code

index.html

@@ -52,7 +52,7 @@ <h1 class="title is-1 has-text-centered">🍵<br>Gong Fu Tea Timer</h1>
                     </div>
                 </div>
             </div>
-            <div class="field">
+            <div class="field" id="confirm-button">
                 <div class="control">
                     <button @click="confirmSettings" class="button is-primary is-fullwidth">Confirm</button>
                 </div>

script.js

@@ -55,23 +55,35 @@ new Vue({
         }
     },
     methods: {
+        /**
+         * Updates the document title to display the time remaining.
+         */
         updateDisplay() {
             document.title = `🍵 ${Math.round(this.timeRemaining)} - Gong Fu Tea Timer`;
         },
+        /**
+         * Resets the timer, clearing any intervals and setting timeRemaining to nextInfusionTime.
+         */
         resetTimer() {
             clearInterval(this.timerInterval);
             clearInterval(this.tabTitleInterval);
             this.timeRemaining = this.nextInfusionTime;
             this.timerRunning = false;
             this.updateDisplay();
         },
+        /**
+         * Toggles the timer between start and stop states.
+         */
         toggleStartStop() {
             if (this.timerRunning) {
                 this.resetTimer();
             } else {
                 this.startTimer();
             }
         },
+        /**
+         * Starts the timer, decrementing timeRemaining at regular intervals.
+         */
         startTimer() {
             this.timerRunning = true;
 
@@ -101,18 +113,27 @@ new Vue({
                 this.updateDisplay();
             }, 1000);
         },
+        /**
+         * Moves to the previous infusion if possible and resets the timer.
+         */
         previousInfusion() {
             if (this.infusionCount > 1) {
                 this.infusionCount--;
                 localStorage.setItem('infusionCount', this.infusionCount);
                 this.resetTimer();
             }
         },
+        /**
+         * Skips to the next infusion and resets the timer.
+         */
         skipInfusion() {
             this.infusionCount++;
             localStorage.setItem('infusionCount', this.infusionCount);
             this.resetTimer();
         },
+        /**
+         * Confirms the current settings and resets the session.
+         */
         confirmSettings() {
             const customSettings = {
                 initialTime: this.initialTime,
@@ -124,6 +145,9 @@ new Vue({
             localStorage.setItem('infusionCount', this.infusionCount);
             this.resetTimer();
         },
+        /**
+         * Returns to settings, discarding the current session.
+         */
         backToSettings() {
             if (confirm('Are you sure you want to discard the current session and return to settings?')) {
                 clearInterval(this.timerInterval);
@@ -134,13 +158,20 @@ new Vue({
                 document.title = "🍵 Gong Fu Tea Timer";
             }
         },
+        /**
+         * Adjusts the offset time by a given percentage.
+         * @param {number} percentage - The percentage to adjust the offset time by.
+         */
         adjustOffsetByPercentage(percentage) {
             if (!this.timerRunning) {
                 this.offsetTime = (this.incrementTime * percentage) / 100;
-                this.timeRemaining = parseFloat((this.nextInfusionTime + this.offsetTime).toFixed(1)); // Update current infusion time
+                this.timeRemaining = parseFloat((this.nextInfusionTime).toFixed(1));
                 this.updateDisplay();
             }
         },
+        /**
+         * Loads the session data from localStorage and initializes the timer.
+         */
         loadSession() {
             const storedInfusionCount = localStorage.getItem('infusionCount');
             const storedSettings = JSON.parse(localStorage.getItem('customSettings'));

styles.css

@@ -25,6 +25,20 @@ body {
     margin-bottom: 10px;
 }
 
+.buttons.are-small .button {
+    font-size: 0.75rem;
+    padding: 0.5rem;
+    margin: 5px;
+}
+
+.mt-4 {
+    margin-top: 1.5rem;
+}
+
+.mt-5 {
+    margin-top: 2rem;
+}
+
 #timer-box {
     text-align: center;
 }
@@ -39,18 +53,8 @@ body {
     font-weight: bold;
 }
 
-.buttons.are-small .button {
-    font-size: 0.75rem;
-    padding: 0.5rem;
-    margin: 5px;
-}
-
-.mt-4 {
-    margin-top: 1.5rem;
-}
-
-.mt-5 {
-    margin-top: 2rem;
+#confirm-button {
+    margin-top: 2.5rem;
 }
 
 @media (max-width: 768px) {