Restyle to work on most screen sizes

web/static/css/style.css

@@ -129,6 +129,12 @@ div.split-controls {
     margin-top: 0 !important;
 }
 
+.reminder-settings > .column {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 50%;
+}
+
 div.reminderContent {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -294,7 +300,7 @@ div.dashboard-sidebar:not(.mobile-sidebar) {
 ul.guildList {
     flex-grow: 1;
     flex-shrink: 1;
-    overflow: scroll;
+    overflow: auto;
 }
 
 div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer {
@@ -453,8 +459,7 @@ input.default-width {
 .customizable.is-400x300 img {
     margin-top: 10px;
     width: 100%;
-    min-height: 100px;
-    max-height: 400px;
+    height: 100px;
 }
 
 .customizable.is-32x32 img {
@@ -598,6 +603,14 @@ input.default-width {
     border-bottom: 1px solid #fff;
 }
 
+.channel-selector {
+    width: 100%;
+}
+
+.select {
+    width: 100%;
+}
+
 li.highlight {
     margin-bottom: 0 !important;
 }
@@ -641,6 +654,21 @@ li.highlight {
     }
 }
 
+@media only screen and (max-width: 1023px) {
+    p.title.pageTitle {
+        display: none;
+    }
+
+    .dashboard-frame {
+        margin-top: 4rem !important;
+    }
+
+    .customizable.thumbnail img {
+        width: 60px;
+        height: 60px;
+    }
+}
+
 @media only screen and (max-width: 768px) {
     .button-row-edit {
         display: flex;
@@ -651,26 +679,6 @@ li.highlight {
         width: 100%;
         margin: 4px;
     }
-
-    p.title.pageTitle {
-        display: none;
-    }
-
-    .dashboard-frame {
-        margin-top: 4rem !important;
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    .customizable.thumbnail img {
-        width: 60px;
-        height: 60px;
-    }
-
-    .customizable.is-24x24 img {
-        width: 16px;
-        height: 16px;
-    }
 }
 
 /* loader */