Fix bouncy bubble widths (#1447)

Max-width on a message bubble should be about 30em for the good readability.
However, when the window isn't wide enough, bubbles must be further limited.

The transition should happen around the point that these two rules intersect,
but it was kicking in a little late, which caused the bubbles to jump from wider
to shorter as you widened the window past a certain point. This change adjusts
the threshold for smoother and more consistent bubble resizing.

The variable name $big-avatar-min-width is an artifact of a past design and was
previously used in multiple places, but it no longer makes sense in this context
so it has been discarded.

// FREEBIE

stylesheets/_conversation.scss

@@ -422,7 +422,7 @@ li.entry .error-icon-container {
     text-align: -webkit-auto;
     -webkit-user-select: text;
 
-    @media(max-width: $big-avatar-min-width - 1px) {
+    @media(max-width: 825px) {
       max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size
     }
 

stylesheets/_variables.scss

@@ -44,8 +44,6 @@ $search-x-size: 16px;
 $unread-badge-size: 21px;
 $loading-height: 16px;
 
-$big-avatar-min-width: 900px;
-
 $border-radius: 5px;
 
 $error-icon-size: 24px;

stylesheets/manifest.css

@@ -1387,7 +1387,7 @@ li.entry .error-icon-container {
     max-width: 30em;
     text-align: -webkit-auto;
     -webkit-user-select: text; }
-    @media (max-width: 899px) {
+    @media (max-width: 825px) {
       .message-container .bubble,
       .message-list .bubble {
         max-width: calc(100% - 45px - 24px); } }