Fix some mobile styles. Fix race condition in client side

web/static/css/style.css

@@ -104,7 +104,7 @@ div.split-controls {
 
 .name-bar {
     flex-grow: 1;
-    flex-shrink: 0;
+    flex-shrink: 1;
 }
 
 .hide-button-bar {
@@ -116,8 +116,17 @@ div.split-controls {
     padding-bottom: 16px;
 }
 
+.tts-row {
+    padding-bottom: 10px;
+}
+
 .reminder-topbar {
     display: flex;
+    margin-bottom: 0 !important;
+}
+
+.reminder-settings {
+    margin-top: 0 !important;
 }
 
 div.reminderContent {
@@ -128,11 +137,19 @@ div.reminderContent {
     border-radius: 8px;
 }
 
-div.interval-group > button {
-    margin-left: auto;
+/* Interval inputs */
+.div.interval-group .clear:focus {
+    outline: none;
+    box-shadow: none !important;
+}
+
+div.interval-group .clear {
+    border: none;
+    background: none;
+    padding: 1px;
+    margin-right: -3px;
 }
 
-/* Interval inputs */
 div.interval-group > .interval-group-left input {
     -webkit-appearance: none;
     border-style: none;
@@ -146,12 +163,13 @@ div.interval-group > .interval-group-left input.w2 {
 }
 
 div.interval-group > .interval-group-left input.w3 {
-    width: 6ch;
+    width: 3ch;
 }
 
 div.interval-group {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
 }
 /* !Interval inputs */
 
@@ -547,6 +565,18 @@ input.default-width {
     border-bottom: 1px solid #fff;
 }
 
+@media only screen and (max-width: 768px) {
+    .button-row {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .button-row > button {
+        width: 100%;
+        margin: 4px;
+    }
+}
+
 @media only screen and (max-width: 768px) {
     .customizable.thumbnail img {
         width: 60px;

web/static/js/main.js

@@ -595,7 +595,7 @@ document.querySelectorAll(".show-modal").forEach((element) => {
     });
 });
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
     $loader.classList.remove("is-hidden");
 
     mentions.attach(document.querySelectorAll("textarea"));
@@ -615,7 +615,7 @@ document.addEventListener("DOMContentLoaded", () => {
         hideBox.closest(".reminderContent").classList.toggle("is-collapsed");
     });
 
-    fetch("/dashboard/api/user")
+    await fetch("/dashboard/api/user")
         .then((response) => response.json())
         .then((data) => {
             if (data.error) {
@@ -629,7 +629,7 @@ document.addEventListener("DOMContentLoaded", () => {
             }
         });
 
-    fetch("/dashboard/api/user/guilds")
+    await fetch("/dashboard/api/user/guilds")
         .then((response) => response.json())
         .then((data) => {
             if (data.error) {

web/templates/reminder_dashboard/guild_reminder.html.tera

@@ -1,5 +1,5 @@
 <div class="reminderContent {% if creating %}creator{% endif %}">
-    <div class="columns column reminder-topbar">
+    <div class="columns is-mobile column reminder-topbar">
         {% if not creating %}
         <div class="invert-collapses channel-bar">
             #channel
@@ -19,7 +19,7 @@
             </button>
         </div>
     </div>
-    <div class="columns">
+    <div class="columns reminder-settings">
         <div class="column discord-frame">
             <article class="media">
                 <figure class="media-left">
@@ -167,7 +167,7 @@
                     <div class="patreon-only">
                         <div class="field">
                             <label class="label">Interval <a class="foreground" href="/help/intervals"><i class="fas fa-question-circle"></i></a></label>
-                            <div class="control intervalSelector" style="min-width: 400px;" >
+                            <div class="control intervalSelector">
                                 <div class="input interval-group">
                                     <div class="interval-group-left">
                                         <label>
@@ -206,7 +206,7 @@
                         </div>
                     </div>
 
-                    <div class="columns">
+                    <div class="columns is-mobile tts-row">
                         <div class="column has-text-centered">
                             <div class="is-boxed">
                                 <label class="label">Enable TTS <input type="checkbox" name="tts"></label>
@@ -230,7 +230,7 @@
                     </div>
                 </div>
 
-                <div>
+                <div class="button-row">
                     <span class="pad-left"></span>
                     {% if creating %}
                         <button class="button is-success" id="createReminder">