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,17 +268,20 @@ fn thread(thread: &ShowThreadQueryThread) -> Node<Msg> {
     let messages = thread.messages.iter().map(|msg| {
         div![
             C!["message"],
-            /* 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"],
+                C!["headers"],
-                IF!(!msg.to.is_empty() => span!["To: ", view_addresses(&msg.to)]),
+                /* TODO(wathiede): collect all the tags and show them here. */
-                IF!(!msg.cc.is_empty() =>  span!["CC: ", view_addresses(&msg.cc)])
+                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![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"],