From 645feeaf8591d1eb5d4ee5631db4cf2b85fe630b Mon Sep 17 00:00:00 2001
From: James Hillyerd <james@hillyerd.com>
Date: Sat, 9 Feb 2019 10:22:15 -0800
Subject: [PATCH] ui: convert mailbox.css to mobile-first

---
 ui/src/mailbox.css | 41 +++++++++++++++++++----------------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/ui/src/mailbox.css b/ui/src/mailbox.css
index 0ca2523..78416d7 100644
--- a/ui/src/mailbox.css
+++ b/ui/src/mailbox.css
@@ -2,11 +2,11 @@
 
 .mailbox {
   display: grid;
-  grid-gap: 1px 20px;
   grid:
-    "ctrl mesg" auto
-    "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
-  height: 100%;
+    "ctrl" auto
+    "list" auto
+    "mesg" auto / 1fr;
+  justify-self: center;
 }
 
 .message-list-controls {
@@ -21,21 +21,27 @@
 
 .message-list {
   grid-area: list;
-  overflow-y: scroll;
 }
 
-@media (max-width: 999px) {
+.message {
+  grid-area: mesg;
+}
+
+@media screen and (min-width: 1000px) {
   .mailbox {
+    grid-gap: 1px 20px;
     grid:
-      "ctrl" auto
-      "list" auto
-      "mesg" auto / 1fr;
-    justify-self: center;
-    width: 100%;
+      "ctrl mesg" auto
+      "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
+    height: 100%;
   }
 
   .message-list {
-    overflow-y: visible;
+    overflow-y: scroll;
+  }
+
+  .message {
+    overflow: auto;
   }
 }
 
@@ -69,14 +75,6 @@
   font-size: 85%;
 }
 
-
-/** MESSAGE */
-
-.message {
-  grid-area: mesg;
-  overflow: auto;
-}
-
 .message-header {
   border: 1px solid var(--border-color);
   border-radius: 4px;
@@ -95,7 +93,7 @@
   padding-left: 10px;
 }
 
-@media (min-width: 1000px) {
+@media screen and (min-width: 1000px) {
   .message-header {
     display: grid;
     grid-template: auto / 5em 1fr;
@@ -124,7 +122,6 @@
   font-weight: 700;
 }
 
-
 nav.tab-bar {
   border-bottom: 1px solid var(--border-color);
   display: flex;