From e65429aa9c02fa1cf81d01ff62d47e56f0d5db48 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Sun, 30 Jul 2023 13:22:57 +0100
Subject: [PATCH] Fix interval input styles

---
 web/static/css/style.css                      | 11 ++++-
 .../guild_reminder.html.tera                  | 44 ++++++++++---------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index 3739ff9..224efc8 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -138,11 +138,20 @@ div.reminderContent {
 }
 
 /* Interval inputs */
-.div.interval-group .clear:focus {
+div.interval-group {
+    height: unset !important;
+}
+
+div.interval-group .clear:focus {
     outline: none;
     box-shadow: none !important;
 }
 
+div.interval-group .no-break {
+    text-wrap: avoid;
+    white-space: nowrap;
+}
+
 div.interval-group .clear {
     border: none;
     background: none;
diff --git a/web/templates/reminder_dashboard/guild_reminder.html.tera b/web/templates/reminder_dashboard/guild_reminder.html.tera
index 653f9f1..1e36c7a 100644
--- a/web/templates/reminder_dashboard/guild_reminder.html.tera
+++ b/web/templates/reminder_dashboard/guild_reminder.html.tera
@@ -170,26 +170,30 @@
                             <div class="control intervalSelector">
                                 <div class="input interval-group">
                                     <div class="interval-group-left">
-                                        <label>
-                                            <span class="is-sr-only">Interval months</span>
-                                            <input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span class="half-rem"></span> months, <span class="half-rem"></span>
-                                        </label>
-                                        <label>
-                                            <span class="is-sr-only">Interval days</span>
-                                            <input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span class="half-rem"></span> days, <span class="half-rem"></span>
-                                        </label>
-                                        <label>
-                                            <span class="is-sr-only">Interval hours</span>
-                                            <input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
-                                        </label>
-                                        <label>
-                                            <span class="is-sr-only">Interval minutes</span>
-                                            <input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
-                                        </label>
-                                        <label>
-                                            <span class="is-sr-only">Interval seconds</span>
-                                            <input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
-                                        </label>
+                                        <span class="no-break">
+                                            <label>
+                                                <span class="is-sr-only">Interval months</span>
+                                                <input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span class="half-rem"></span> months, <span class="half-rem"></span>
+                                            </label>
+                                            <label>
+                                                <span class="is-sr-only">Interval days</span>
+                                                <input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span class="half-rem"></span> days, <span class="half-rem"></span>
+                                            </label>
+                                        </span>
+                                        <span class="no-break">
+                                            <label>
+                                                <span class="is-sr-only">Interval hours</span>
+                                                <input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
+                                            </label>
+                                            <label>
+                                                <span class="is-sr-only">Interval minutes</span>
+                                                <input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
+                                            </label>
+                                            <label>
+                                                <span class="is-sr-only">Interval seconds</span>
+                                                <input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
+                                            </label>
+                                        </span>
                                     </div>
                                     <button class="clear"><span class="is-sr-only">Clear interval</span><span class="icon"><i class="fas fa-trash"></i></span></button>
                                 </div>