Adjust widths of bubbles and chat window

With these changes, message bubbles in the default-sized chat popup are
just wide enough to display the full complement of html5 media player
controls.

js/panel_controller.js

@@ -57,7 +57,7 @@
                 url: 'conversation.html',
                 type: 'panel',
                 focused: true,
-                width: 280,
+                width: 300,
                 height: 420
             }, function (windowInfo) {
                 windowMap.add({ windowId: windowInfo.id, modelId: modelId });

stylesheets/_conversation.scss

@@ -107,7 +107,7 @@
     left: -2px;
     display: inline-block;
     vertical-align: top;
-    max-width: calc(100% - 54px - 2 * 12px);
+    max-width: calc(100% - 20px - 2 * 12px);
     padding: 9px 12px;
     border-radius: 4px;
     box-shadow: 0 3px 3px -4px black;
@@ -120,13 +120,13 @@
     }
 
     &::before {
-      top: (54px / 2) - 8px;
+      top: (44px / 2) - 8px;
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
     }
 
     &::after {
-      top: (54px / 2) - 6px;
+      top: (44px / 2) - 6px;
       border-top: 6px solid transparent;
       border-bottom: 6px solid transparent;
     }
@@ -192,10 +192,10 @@
   }
 
   img.avatar {
-    height: 44px;
-    width: 44px;
+    height: 36px;
+    width: 36px;
     background: $grey_l;
-    border-radius: (44px / 2);
+    border-radius: (36px / 2);
   }
 
   .timestamp {

stylesheets/manifest.css

@@ -359,7 +359,7 @@ input.new-message {
     left: -2px;
     display: inline-block;
     vertical-align: top;
-    max-width: calc(100% - 54px - 2 * 12px);
+    max-width: calc(100% - 20px - 2 * 12px);
     padding: 9px 12px;
     border-radius: 4px;
     box-shadow: 0 3px 3px -4px black; }
@@ -372,12 +372,12 @@ input.new-message {
       width: 0; }
     .message-detail .bubble::before,
     .message-list .bubble::before {
-      top: 19px;
+      top: 14px;
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent; }
     .message-detail .bubble::after,
     .message-list .bubble::after {
-      top: 21px;
+      top: 16px;
       border-top: 6px solid transparent;
       border-bottom: 6px solid transparent; }
   .message-detail .incoming .bubble,
@@ -425,10 +425,10 @@ input.new-message {
     display: none; }
   .message-detail img.avatar,
   .message-list img.avatar {
-    height: 44px;
-    width: 44px;
+    height: 36px;
+    width: 36px;
     background: #f3f3f3;
-    border-radius: 22px; }
+    border-radius: 18px; }
   .message-detail .timestamp,
   .message-list .timestamp {
     margin-top: 3px;