From 567a48e82bcbf090b612fb46d10bbe1ad0f42a96 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 4 Mar 2015 13:59:40 -0800
Subject: [PATCH] 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         |  2 +-
 stylesheets/_conversation.scss | 12 ++++++------
 stylesheets/manifest.css       | 12 ++++++------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/js/panel_controller.js b/js/panel_controller.js
index 155094ad..e95d466b 100644
--- a/js/panel_controller.js
+++ b/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 });
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index ac17e9e2..139dce03 100644
--- a/stylesheets/_conversation.scss
+++ b/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 {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 046b5f9c..2b61a3d7 100644
--- a/stylesheets/manifest.css
+++ b/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;