more web display improvements

2 files changed, 16 insertions, 10 deletions

diff --git a/teleterm-web/src/views/list.rs b/teleterm-web/src/views/list.rs
index 6d4ccd5..88d8a37 100644
--- a/teleterm-web/src/views/list.rs
+++ b/teleterm-web/src/views/list.rs
@@ -4,6 +4,7 @@ pub(crate) fn render(model: &crate::model::Model) -> Vec<Node<crate::Msg>> {
     let rows: Vec<_> = model.sessions().iter().map(row).collect();
     vec![
         seed::table![
+            seed::attrs! { At::Class => "list" },
             seed::tr![
                 seed::th!["username"],
                 seed::th!["size"],
@@ -19,13 +20,10 @@ pub(crate) fn render(model: &crate::model::Model) -> Vec<Node<crate::Msg>> {
 
 fn row(session: &crate::protocol::Session) -> Node<crate::Msg> {
     seed::tr![
-        seed::td![seed::a![
-            simple_ev(
-                Ev::Click,
-                crate::Msg::StartWatching(session.id.clone())
-            ),
-            session.username,
-        ]],
+        simple_ev(Ev::Click, crate::Msg::StartWatching(session.id.clone())),
+        seed::td![
+            seed::a![seed::attrs! {At::Href => "#"}, session.username,]
+        ],
         seed::td![format!("{}x{}", session.size.cols, session.size.rows)],
         seed::td![format_time(session.idle_time)],
         seed::td![format!("{}", session.watchers)],
diff --git a/teleterm-web/src/views/watch.rs b/teleterm-web/src/views/watch.rs
index 07e8244..841b438 100644
--- a/teleterm-web/src/views/watch.rs
+++ b/teleterm-web/src/views/watch.rs
@@ -1,4 +1,5 @@
 use crate::prelude::*;
+use unicode_width::UnicodeWidthStr as _;
 
 pub(crate) fn render(model: &crate::model::Model) -> Node<crate::Msg> {
     let screen = if let Some(screen) = model.screen() {
@@ -13,10 +14,17 @@ pub(crate) fn render(model: &crate::model::Model) -> Node<crate::Msg> {
         let mut row = vec![];
         for col_idx in 0..cols {
             let cell = screen.cell(row_idx, col_idx).unwrap();
-            row.push(seed::div![cell.contents()])
+            let mut contents = cell.contents();
+            if contents.trim().is_empty() || contents.width() == 0 {
+                contents = "\u{00a0}".to_string();
+            }
+            row.push(seed::td![
+                seed::attrs! { At::Class => "cell" },
+                contents
+            ])
         }
-        grid.push(seed::div![row]);
+        grid.push(seed::tr![seed::attrs! { At::Class => "row" }, row]);
     }
 
-    seed::div![grid]
+    seed::table![seed::attrs! { At::Class => "grid" }, grid]
 }