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,16 +45,15 @@ 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"
-            [ Html.node "rendered-html"
+            [ class "greeting"
-                [ class "greeting"
+            , property "content" (Encode.string model.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,35 +88,34 @@ 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" ]
-            [ h1 [] [ text "Monitor" ]
+        , p []
-            , p []
+            [ text "Messages will be listed here shortly after delivery. "
-                [ text "Messages will be listed here shortly after delivery. "
+            , em []
-                , em []
+                [ text
-                    [ text
+                    (if model.connected then
-                        (if model.connected then
+                        "Connected."
-                            "Connected."
 
-                         else
+                     else
-                            "Disconnected!"
+                        "Disconnected!"
-                        )
+                    )
-                    ]
-                ]
-            , table [ class "monitor" ]
-                [ thead []
-                    [ th [] [ text "Date" ]
-                    , th [ class "desktop" ] [ text "From" ]
-                    , th [] [ text "Mailbox" ]
-                    , th [] [ text "Subject" ]
-                    ]
-                , tbody [] (List.map (viewMessage session.zone) model.messages)
                 ]
             ]
+        , table [ class "monitor" ]
+            [ thead []
+                [ th [] [ text "Date" ]
+                , th [ class "desktop" ] [ text "From" ]
+                , th [] [ text "Mailbox" ]
+                , th [] [ text "Subject" ]
+                ]
+            , tbody [] (List.map (viewMessage session.zone) model.messages)
+            ]
+        ]
     }
 
 

ui/src/Page/Status.elm

@@ -225,15 +225,14 @@ 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" ]
-            [ h1 [] [ text "Status" ]
+        , div [] (configPanel model.config :: metricPanels model)
-            , 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