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;