ui: Stop using element IDs for styling

ui/src/Page/Home.elm

@@ -55,7 +55,7 @@ view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
     { title = "Inbucket"
     , content =
-        div [ id "page" ]
+        div [ class "page" ]
             [ Html.node "rendered-html"
                 [ class "greeting"
                 , property "content" (Encode.string model.greeting)

ui/src/Page/Mailbox.elm

@@ -474,10 +474,10 @@ view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
     { title = model.mailboxName ++ " - Inbucket"
     , content =
-        div [ id "page", class "mailbox" ]
+        div [ class "page mailbox" ]
             [ viewMessageList session model
             , main_
-                [ id "message" ]
+                [ class "message" ]
                 [ case model.state of
                     ShowingList _ NoMessage ->
                         text
@@ -500,7 +500,7 @@ view session model =
 
 viewMessageList : Session -> Model -> Html Msg
 viewMessageList session model =
-    aside [ id "message-list" ]
+    aside [ class "message-list" ]
         [ div []
             [ input
                 [ type_ "search"
@@ -554,7 +554,7 @@ viewMessage zone message bodyMode =
                 [ href sourceUrl, target "_blank" ]
                 [ button [] [ text "Source" ] ]
             ]
-        , dl [ id "message-header" ]
+        , dl [ class "message-header" ]
             [ dt [] [ text "From:" ]
             , dd [] [ text message.from ]
             , dt [] [ text "To:" ]

ui/src/Page/Monitor.elm

@@ -86,7 +86,7 @@ view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
     { title = "Inbucket Monitor"
     , content =
-        div [ id "page" ]
+        div [ class "page" ]
             [ h1 [] [ text "Monitor" ]
             , p []
                 [ text "Messages will be listed here shortly after delivery. "
@@ -100,7 +100,7 @@ view session model =
                         )
                     ]
                 ]
-            , table [ id "monitor" ]
+            , table [ class "monitor" ]
                 [ thead []
                     [ th [] [ text "Date" ]
                     , th [ class "desktop" ] [ text "From" ]

ui/src/Page/Status.elm

@@ -219,7 +219,7 @@ view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
     { title = "Inbucket Status"
     , content =
-        div [ id "page" ]
+        div [ class "page" ]
             [ h1 [] [ text "Status" ]
             , case model.metrics of
                 Nothing ->