From 5d8e8459b31d1560034862e77032f2037ed95c91 Mon Sep 17 00:00:00 2001
From: Lilia <liliakai@gmail.com>
Date: Thu, 7 Sep 2017 18:57:33 +0200
Subject: [PATCH] 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 | 2 +-
 stylesheets/_variables.scss    | 2 --
 stylesheets/manifest.css       | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index f87c1cf840f..e598fc8d47c 100644
--- a/stylesheets/_conversation.scss
+++ b/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
     }
 
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 195ea8af498..e2c5a4b8c7d 100644
--- a/stylesheets/_variables.scss
+++ b/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;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 81950478281..e1444de7e7d 100644
--- a/stylesheets/manifest.css
+++ b/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); } }