Update mockup somewhat to see how to more nicely render avatars

mockup/chatroom.html

@@ -37,30 +37,31 @@
                     <div class="chat-body chatroom-body row no-gutters">
                             <div class="chat-area col-md-9 col-8">
                                 <div class="chat-content">
-									<time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-24T00:00:00+02:00">Tuesday Apr 24th 2018</time>
-									<div class="message chat-info chat-event" data-isodate="2018-04-24T18:07:24+02:00" data-join="&quot;jc&quot;">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-24T18:07:26+02:00" data-msgid="4fb4d101-8124-4f2a-8dfb-2615896b8316">
+									<time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-36T00:00:00+02:00">Tuesday Apr 36th 2018</time>
+									<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;jc&quot;">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-36T18:07:26+02:00" data-msgid="4fb4d101-8136-4f2a-8dfb-2615896b8316">
+										<canvas height="36" width="36" class="avatar"></canvas>
 										<span class="chat-msg-author chat-msg-me">18:07 me:&nbsp;</span>
 										<span class="chat-msg-content">ee</span>
 										<div class="chat-msg-media"></div>
 									</div>
-                                    <div class="chat-message">
+                                    <div class="message chat-message">
+										<canvas height="36" width="36" class="avatar"></canvas>
                                         <span class="chat-msg-author chat-msg-room">18:50&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
                                             <span class="chat-msg-room">luke:&nbsp;</span>
                                         </span>
                                         <span class="chat-msg-content">leia: hi :)</span>
                                     </div>
-                                    <div class="chat-message">
-                                        <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                    <div class="message chat-message">
+										<canvas height="36" width="36" class="avatar"></canvas>
+                                        <span class="chat-msg-author chat-msg-room">19:36&nbsp;
                                             <span class="chat-msg-room">leia:&nbsp;</span>
                                         </span>
                                         <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
                                     </div>
                                     <time class="message chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
-                                    <div class="chat-message">
-                                        <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                    <div class="message chat-message">
+										<canvas height="36" width="36" class="avatar"></canvas>
+                                        <span class="chat-msg-author chat-msg-room">19:36&nbsp;
                                             <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
                                         </span>
                                         <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
@@ -72,16 +73,16 @@
                                          patient if your questions aren't answered immediately. We're all in different timezones.</div>
 
 
-                                    <div class="chat-message">
+                                    <div class="message chat-message">
+										<canvas height="36" width="36" class="avatar"></canvas>
                                         <span class="chat-msg-author chat-msg-me">19:42&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
                                             <span class="chat-msg-me">me:&nbsp;</span>
                                         </span>
                                         <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
                                     </div>
-                                    <div class="chat-message">
+                                    <div class="message chat-message">
+										<canvas height="36" width="36" class="avatar"></canvas>
                                         <span class="chat-msg-author chat-msg-room">19:43&nbsp;
-                                            <canvas height="24" width="24" class="avatar"></canvas>
                                             <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
                                         </span>
                                         <span class="chat-msg-content">Another message to check that scrolling works.</span>