From cbacf14ca19abfcfcae3b357365f29e8d231719e Mon Sep 17 00:00:00 2001
From: Chris Frankland-Wright <christopherjfrankland@googlemail.com>
Date: Tue, 12 Aug 2025 16:19:53 +0100
Subject: [PATCH] Style: Improve Timeturner offset layout with compact inputs
 and side labels

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 static/index.html | 32 ++++++++++++++++----------------
 static/style.css  | 27 +++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/static/index.html b/static/index.html
index 344e8b5..1e8d400 100644
--- a/static/index.html
+++ b/static/index.html
@@ -72,26 +72,26 @@
     </div>
                     <div class="control-group">
                         <label>Timeturner Offset</label>
-                        <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
-                            <div style="display: flex; flex-direction: column;">
-                                <label for="offset-h">Hours</label>
-                                <input type="number" id="offset-h" style="width: 60px;">
+                        <div class="offset-controls-container">
+                            <div class="offset-control">
+                                <input type="number" id="offset-h" min="-99" max="99">
+                                <label for="offset-h">hr</label>
                             </div>
-                            <div style="display: flex; flex-direction: column;">
-                                <label for="offset-m">Minutes</label>
-                                <input type="number" id="offset-m" style="width: 60px;">
+                            <div class="offset-control">
+                                <input type="number" id="offset-m" min="-99" max="99">
+                                <label for="offset-m">min</label>
                             </div>
-                            <div style="display: flex; flex-direction: column;">
-                                <label for="offset-s">Seconds</label>
-                                <input type="number" id="offset-s" style="width: 60px;">
+                            <div class="offset-control">
+                                <input type="number" id="offset-s" min="-99" max="99">
+                                <label for="offset-s">sec</label>
                             </div>
-                            <div style="display: flex; flex-direction: column;">
-                                <label for="offset-f">Frames</label>
-                                <input type="number" id="offset-f" style="width: 60px;">
+                            <div class="offset-control">
+                                <input type="number" id="offset-f" min="-99" max="99">
+                                <label for="offset-f">fr</label>
                             </div>
-                            <div style="display: flex; flex-direction: column;">
-                                <label for="offset-ms">Milliseconds</label>
-                                <input type="number" id="offset-ms" style="width: 60px;">
+                            <div class="offset-control">
+                                <input type="number" id="offset-ms">
+                                <label for="offset-ms">ms</label>
                             </div>
                         </div>
                     </div>
diff --git a/static/style.css b/static/style.css
index 2d7c0a3..2266add 100644
--- a/static/style.css
+++ b/static/style.css
@@ -132,6 +132,33 @@ button:hover {
     background-color: #166999;
 }
 
+.offset-controls-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: center;
+}
+
+.offset-control {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.offset-control input[type="number"] {
+    width: 40px;
+    text-align: center;
+}
+
+.offset-control label {
+    font-size: 14px;
+    color: #333;
+}
+
+#offset-ms {
+    width: 60px;
+}
+
 #sync-message {
     font-style: italic;
     color: #555;