ui: Make the error flash look nice

ui/src/HttpUtil.elm

@@ -63,8 +63,8 @@ errorFlash error =
             { flash
                 | table =
                     flash.table
-                        ++ [ ( "Method", error.request.method )
-                           , ( "URL", error.request.url )
+                        ++ [ ( "Request URL", error.request.url )
+                           , ( "HTTP Method", error.request.method )
                            ]
             }
     in
@@ -92,7 +92,7 @@ errorFlash error =
 
             Http.BadBody body ->
                 { title = "Bad HTTP body"
-                , table = [ ( "Body", body ) ]
+                , table = [ ( "Error", body ) ]
                 }
 
 

ui/src/Views/Page.elm

@@ -90,10 +90,9 @@ errorFlash : FrameControls msg -> Maybe Session.Flash -> Html msg
 errorFlash controls maybeFlash =
     let
         row ( heading, message ) =
-            pre []
-                [ text heading
-                , text ": "
-                , text message
+            tr []
+                [ th [] [ text (heading ++ ":") ]
+                , td [] [ pre [] [ text message ] ]
                 ]
     in
     case maybeFlash of

ui/src/main.css

@@ -136,13 +136,18 @@ h1 {
   font-weight: 500;
 }
 
+h2 {
+  font-size: 16px;
+  font-weight: 700;
+}
+
 .error {
   background-color: #f58080;
   background-image: linear-gradient(to bottom, #e86060 0, #f58080 100%);
   border: 1px solid #e86060;
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0,0,0,.05);
-  padding: 4px 10px;
+  padding: 6px 10px;
   margin: 20px 0;
 }
 
@@ -155,13 +160,22 @@ h1 {
   text-decoration: underline;
 }
 
+.error th {
+  padding-right: 5px;
+  text-align: left;
+  white-space: nowrap;
+}
+
 .flash-header {
   display: flex;
   justify-content: space-between;
 }
 
 .flash-table {
+  border-left: 4px solid rgba(0,0,0,0.2);
   overflow: auto;
+  padding-bottom: 4px;
+  padding-left: 4px;
 }
 
 .greeting {