<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <style media="screen" type="text/css">
      .avatar { width: 32px; height: 32px; }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <h1>{{title}}</h1>
      {% for user in users %}
        <div id="{{user.name}}">
          <h2>{{user.name}}</h2>
          {% for service in user.services %}
            <div class="{{service.name}}">
              {{service.cachedHtml}}
            </div>
          {% endfor %}
        </div>
      {% endfor %}
    </div>

    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      var socket = io();
      socket.on('update', function(update) {
        var statePath = '#' + update.name + ' .' + update.service;
        $(statePath).html(update.html);
      })
    </script>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <style media="screen" type="text/css">
      .avatar { width: 2.25em; height: 2.25em; }
      .small-avatar { width: 1.25em; height: 1.25em; }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <h1>{{title}}</h1>
      {% for user in users %}
        <div id="{{user.name}}">
          <h2>{{user.name}}</h2>
          {% for service in user.services %}
            <div class="{{service.name}}">
              {{service.cachedHtml}}
            </div>
          {% endfor %}
        </div>
      {% endfor %}
    </div>

    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      var socket = io();
      socket.on('update', function(update) {
        var statePath = '#' + update.name + ' .' + update.service;
        $(statePath).html(update.html);
      })
    </script>
  </body>
</html>

Add small avatar size and size avatars relative to font size.
Add small avatar size and size avatars relative to font size.
