From 7a16f64ff01e6f2610e55d9cc7934bfe76092c34 Mon Sep 17 00:00:00 2001
From: James Hillyerd <james@hillyerd.com>
Date: Sun, 25 Nov 2018 21:19:28 -0800
Subject: [PATCH] ui: Make message & list scroll within viewport

---
 ui/src/Page/Mailbox.elm | 39 ++++++++++++++++++---------------------
 ui/src/main.css         | 40 ++++++++++++++++++++++++----------------
 2 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/ui/src/Page/Mailbox.elm b/ui/src/Page/Mailbox.elm
index 87b2ffa..8557b3d 100644
--- a/ui/src/Page/Mailbox.elm
+++ b/ui/src/Page/Mailbox.elm
@@ -475,7 +475,17 @@ view session model =
     { title = model.mailboxName ++ " - Inbucket"
     , content =
         div [ class "page mailbox" ]
-            [ viewMessageList session model
+            [ aside [ class "message-list-controls" ]
+                [ input
+                    [ type_ "search"
+                    , placeholder "search"
+                    , onInput OnSearchInput
+                    , value model.searchInput
+                    ]
+                    []
+                , button [ onClick PurgeMailbox ] [ text "Purge" ]
+                ]
+            , viewMessageList session model
             , main_
                 [ class "message" ]
                 [ case model.state of
@@ -500,29 +510,16 @@ view session model =
 
 viewMessageList : Session -> Model -> Html Msg
 viewMessageList session model =
-    aside [ class "message-list" ]
-        [ div []
-            [ input
-                [ type_ "search"
-                , placeholder "search"
-                , onInput OnSearchInput
-                , value model.searchInput
-                ]
-                []
-            , button [ onClick PurgeMailbox ] [ text "Purge" ]
-            ]
-        , case model.state of
+    aside [ class "message-list" ] <|
+        case model.state of
             LoadingList _ ->
-                div [] []
+                []
 
             ShowingList list _ ->
-                div []
-                    (list
-                        |> filterMessageList
-                        |> List.reverse
-                        |> List.map (messageChip model list.selected)
-                    )
-        ]
+                list
+                    |> filterMessageList
+                    |> List.reverse
+                    |> List.map (messageChip model list.selected)
 
 
 messageChip : Model -> Maybe MessageID -> MessageHeader -> Html Msg
diff --git a/ui/src/main.css b/ui/src/main.css
index 84eb117..3dbf441 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -115,6 +115,7 @@ header {
 
 .page {
   grid-area: page;
+  min-height: 0; /* Allows scrolling in nested flex/grids. */
 }
 
 footer {
@@ -284,28 +285,34 @@ li.navbar-active span,
 .mailbox {
   display: grid;
   grid-area: page;
-  grid-gap: 20px;
-  grid-template-areas:
-    "list mesg";
-  grid-template-columns:
-    minmax(200px, 300px)
-    minmax(650px, 1000px);
-  grid-template-rows: 1fr;
+  grid-gap: 1px 20px;
+  grid:
+    "ctrl mesg" auto
+    "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
 }
 
-@media (max-width: 999px) {
-  .mailbox {
-    grid-template-areas:
-      "list"
-      "mesg";
-    grid-template-columns: none;
-    grid-template-rows: none;
-    justify-self: center;
-  }
+.message-list-controls {
+  grid-area: ctrl;
 }
 
 .message-list {
   grid-area: list;
+  overflow-y: scroll;
+}
+
+@media (max-width: 999px) {
+  .mailbox {
+    grid:
+      "ctrl" auto
+      "list" auto
+      "mesg" auto / 1fr;
+    justify-self: center;
+    width: 100%;
+  }
+
+  .message-list {
+    overflow-y: visible;
+  }
 }
 
 .message-list-entry {
@@ -343,6 +350,7 @@ li.navbar-active span,
 
 .message {
   grid-area: mesg;
+  overflow: auto;
 }
 
 .message-header {