ui: Move div.page into Page frame

ui/src/HttpUtil.elm

@@ -81,12 +81,12 @@ errorFlash error =
                 }
 
             Http.NetworkError ->
-                { title = "HTTP Network error"
+                { title = "HTTP network error"
                 , table = []
                 }
 
             Http.BadStatus res ->
-                { title = "Bad HTTP status"
+                { title = "HTTP response error"
                 , table = [ ( "Response Code", String.fromInt res ) ]
                 }
 

ui/src/Main.elm

@@ -307,7 +307,7 @@ view model =
         framePage :
             ActivePage
             -> (msg -> Msg)
-            -> { title : String, modal : Maybe (Html msg), content : Html msg }
+            -> { title : String, modal : Maybe (Html msg), content : List (Html msg) }
             -> Document Msg
         framePage page toMsg { title, modal, content } =
             Document title
@@ -315,7 +315,7 @@ view model =
                     model.session
                     page
                     (Maybe.map (Html.map toMsg) modal)
-                    (Html.map toMsg content)
+                    (List.map (Html.map toMsg) content)
                 ]
     in
     case model.page of

ui/src/Page/Home.elm

@@ -45,12 +45,11 @@ update session msg model =
 -- VIEW --
 
 
-view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg }
+view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : List (Html Msg) }
 view session model =
     { title = "Inbucket"
     , modal = Nothing
     , content =
-        div [ class "page" ]
         [ Html.node "rendered-html"
             [ class "greeting"
             , property "content" (Encode.string model.greeting)

ui/src/Page/Mailbox.elm

@@ -444,12 +444,12 @@ updateOpenMessage session model id =
 -- VIEW
 
 
-view : Session -> Model -> { title : String, modal : Maybe (Html Msg), content : Html Msg }
+view : Session -> Model -> { title : String, modal : Maybe (Html Msg), content : List (Html Msg) }
 view session model =
     { title = model.mailboxName ++ " - Inbucket"
     , modal = viewModal model.promptPurge
     , content =
-        div [ class "page mailbox" ]
+        [ div [ class "mailbox" ]
             [ aside [ class "message-list-controls" ]
                 [ input
                     [ type_ "search"
@@ -480,6 +480,7 @@ view session model =
                         text ""
                 ]
             ]
+        ]
     }
 
 

ui/src/Page/Monitor.elm

@@ -88,12 +88,11 @@ update session msg model =
 -- VIEW
 
 
-view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg }
+view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : List (Html Msg) }
 view session model =
     { title = "Inbucket Monitor"
     , modal = Nothing
     , content =
-        div [ class "page" ]
         [ h1 [] [ text "Monitor" ]
         , p []
             [ text "Messages will be listed here shortly after delivery. "

ui/src/Page/Status.elm

@@ -225,12 +225,11 @@ updateRemoteTotal metric value history =
 -- VIEW --
 
 
-view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg }
+view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : List (Html Msg) }
 view session model =
     { title = "Inbucket Status"
     , modal = Nothing
     , content =
-        div [ class "page" ]
         [ h1 [] [ text "Status" ]
         , div [] (configPanel model.config :: metricPanels model)
         ]

ui/src/Views/Page.elm

@@ -37,7 +37,7 @@ type alias FrameControls msg =
     }
 
 
-frame : FrameControls msg -> Session -> ActivePage -> Maybe (Html msg) -> Html msg -> Html msg
+frame : FrameControls msg -> Session -> ActivePage -> Maybe (Html msg) -> List (Html msg) -> Html msg
 frame controls session page modal content =
     div [ class "app" ]
         [ header []
@@ -59,11 +59,10 @@ frame controls session page modal content =
                         ]
                     ]
                 ]
-            , errorFlash controls session.flash
             ]
         , div [ class "navbar-bg" ] [ text "" ]
         , frameModal modal
-        , content
+        , div [ class "page" ] ([ errorFlash controls session.flash ] ++ content)
         , footer []
             [ div [ class "footer" ]
                 [ externalLink "https://www.inbucket.org" "Inbucket"

ui/src/main.css

@@ -115,7 +115,9 @@ header {
 
 .page {
   grid-area: page;
-  min-height: 0; /* Allows scrolling in nested flex/grids. */
+  /* Explicit minimums required for sizing/scrolling in nested flex+grids. */
+  min-height: 0;
+  min-width: 0;
 }
 
 footer {
@@ -159,7 +161,6 @@ h1 {
 }
 
 .flash-table {
-  max-width: 90vw;
   overflow: auto;
 }
 
@@ -310,7 +311,6 @@ li.navbar-active span,
 
 .mailbox {
   display: grid;
-  grid-area: page;
   grid-gap: 1px 20px;
   grid:
     "ctrl mesg" auto