web: properly truncate long headers on message view

web/index.html

@@ -12,6 +12,14 @@
 .message {
   padding: 0.5em;*/
 }
+.message .headers {
+  width: 100%;
+}
+.message .headers .header {
+  overflow: clip;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .body {
   background: white;
   color: black;

web/src/view/mod.rs

@@ -268,18 +268,21 @@ fn thread(thread: &ShowThreadQueryThread) -> Node<Msg> {
     let messages = thread.messages.iter().map(|msg| {
         div![
             C!["message"],
+            div![
+                C!["headers"],
                 /* TODO(wathiede): collect all the tags and show them here. */
                 msg.from
                     .as_ref()
                     .map(|from| div![C!["header"], "From: ", view_address(&from)]),
                 msg.timestamp
                     .map(|ts| div![C!["header"], "Date: ", human_age(ts)]),
-            div!["Message-ID: ", &msg.id],
+                div![C!["header"], "Message-ID: ", &msg.id],
                 div![
                     C!["header"],
                     IF!(!msg.to.is_empty() => span!["To: ", view_addresses(&msg.to)]),
                     IF!(!msg.cc.is_empty() =>  span!["CC: ", view_addresses(&msg.cc)])
                 ],
+            ],
             div![
                 C!["body"],
                 match &msg.body {