Change table layout.

Dynamically resizing is a pain in the ass and not portable.

src/Scylla/Views.elm

@@ -69,7 +69,24 @@ roomListElementView s jr =
     let
         name = Maybe.withDefault "<No Name>"  <| roomName jr
     in
-        a [ href <| roomUrl s ] [ text name ]
+        div [ class "room-link-wrapper" ]
+            [ a [ href <| roomUrl s ] [ text name ]
+            , roomNotificationCountView jr.unreadNotifications
+            ]
+
+roomNotificationCountView : Maybe UnreadNotificationCounts -> Html Msg
+roomNotificationCountView ns =
+    let
+        spanNumber = case Maybe.andThen .notificationCount ns of
+            Nothing -> ""
+            Just 0 -> ""
+            Just i -> String.fromInt i
+        spanSuffix = case Maybe.andThen .highlightCount ns of
+            Nothing -> ""
+            Just 0 -> ""
+            Just i -> "!"
+    in
+        span [ class "notification-count" ] [ text (spanNumber ++ spanSuffix) ]
 
 loginView : Model -> Html Msg
 loginView m = div [ class "login-wrapper" ]

static/scss/style.scss

@@ -89,7 +89,7 @@ div.base-wrapper {
     display: flex;
     height: 100%;
 
-    div {
+    > div {
         padding: 5px;
         box-sizing: border-box;
     }
@@ -100,9 +100,15 @@ div.base-wrapper {
  */
 div.rooms-wrapper {
     flex-shrink: 0;
+}
 
-    a {
+div.room-link-wrapper {
-        display: block;
+    whitespace: nowrap;
+    display: flex;
+    padding: 0px;
+
+    span, a {
+        margin-right: 5px;
     }
 }
 
@@ -141,6 +147,7 @@ div.events-wrapper {
 table.events-table {
     border-collapse: collapse;
     width: 100%;
+    table-layout: fixed;
 
     td {
         padding: 5px;
@@ -148,7 +155,8 @@ table.events-table {
     }
 
     td:nth-child(1) {
-        width: 0px;
+        width: 10%;
+        max-width: 100px;
         white-space: nowrap;
     }
 
@@ -165,8 +173,9 @@ span.sender-wrapper {
     box-sizing: border-box;
     text-align: center;
     width: 100%;
-    max-width: 100px;
     text-overflow: ellipsis;
+    overflow: hidden;
+    vertical-align: bottom; /* Fix for overflow changing element height */
 }
 
 /**