From 832f7ab6431092f818103ebd5bcaeaa092e9cca7 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Thu, 12 Nov 2015 10:43:07 -0800
Subject: [PATCH] Limit max widths of various elements

Bubbles are limited to 30em to facilitate comfortable reading length.
The width of the message list is limited to aid visual threading
of the conversation. The overall layout is restricted to 1300px and
centered if the window is much wider.

The header avatar resizes responsively to save room when the window
gets narrow

// FREEBIE
---
 stylesheets/_conversation.scss | 10 +++++++++-
 stylesheets/_global.scss       |  1 +
 stylesheets/_index.scss        | 17 +++++++++++++----
 stylesheets/manifest.css       | 31 ++++++++++++++++++++++++-------
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 937ce701f2..230780c234 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -239,6 +239,7 @@
 
 
   li {
+    max-width: 800px;
     margin: 0 8px 16px;
 
     &::after {
@@ -256,12 +257,16 @@
     left: -2px;
     display: inline-block;
     vertical-align: top;
-    max-width: calc(100% - 20px - 2 * 22px);
     padding: 9px 12px;
     border-radius: 10px;
     box-shadow: 0 3px 3px -4px black;
     word-wrap: break-word;
     margin-left: 8px;
+    max-width: 30em;
+
+    @media(max-width:950px) {
+      max-width: calc(100% - 45px); // avatar size + padding
+    }
 
     .content {
       -webkit-user-select: text;
@@ -294,6 +299,9 @@
   }
 
   .incoming {
+    .avatar, .bubble {
+      float: left;
+    }
     .bubble {
       color: $grey_d;
       background-color: $grey_l;
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index f00ef74ddc..65b51a527a 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -30,6 +30,7 @@ body {
 }
 
 #header {
+  max-width: 1300px;
   position: fixed;
   top: 1px;
   width: calc(100% - 2px);
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 4d6a0322ed..ce1944bee2 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -67,12 +67,19 @@
 .conversation-header {
   border-bottom: solid 1px darken($grey_l, 10%);
   margin-bottom: 4px;
+  padding-bottom: 5px;
   .avatar {
     float: left;
-    width: 70px;
-    height: 70px;
-    line-height: 70px;
-    font-size: x-large;
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
+  }
+  @media(min-width:950px) {
+    .avatar {
+      width: 70px;
+      height: 70px;
+      line-height: 70px;
+    }
   }
 }
 .menu.conversation-menu {
@@ -146,6 +153,8 @@ input.search {
 }
 
 .index {
+  max-width: 1300px;
+  margin: auto;
   color: $grey_d;
   background: linear-gradient(rgba(46,172,224,1.0) 50%, rgba(160,228,208,1.0) 100%);
 
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 3088a05731..77fa78339e 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -39,6 +39,7 @@ body {
   display: none; }
 
 #header {
+  max-width: 1300px;
   position: fixed;
   top: 1px;
   width: calc(100% - 2px);
@@ -467,13 +468,18 @@ img.emoji {
 
 .conversation-header {
   border-bottom: solid 1px #d9d9d9;
-  margin-bottom: 4px; }
+  margin-bottom: 4px;
+  padding-bottom: 5px; }
   .conversation-header .avatar {
     float: left;
-    width: 70px;
-    height: 70px;
-    line-height: 70px;
-    font-size: x-large; }
+    width: 36px;
+    height: 36px;
+    line-height: 36px; }
+  @media (min-width: 950px) {
+    .conversation-header .avatar {
+      width: 70px;
+      height: 70px;
+      line-height: 70px; } }
 
 .menu.conversation-menu button.drop-down {
   background: url("/images/arrow_drop_down.png") no-repeat center; }
@@ -527,6 +533,8 @@ input.search {
     padding-right: 8px; }
 
 .index {
+  max-width: 1300px;
+  margin: auto;
   color: #454545;
   background: linear-gradient(#2eace0 50%, #a0e4d0 100%); }
   .index .gutter .new-group-update-form {
@@ -727,6 +735,7 @@ input.search {
   list-style: none; }
   .message-detail li,
   .message-list li {
+    max-width: 800px;
     margin: 0 8px 16px; }
     .message-detail li::after,
     .message-list li::after {
@@ -742,12 +751,16 @@ input.search {
     left: -2px;
     display: inline-block;
     vertical-align: top;
-    max-width: calc(100% - 20px - 2 * 22px);
     padding: 9px 12px;
     border-radius: 10px;
     box-shadow: 0 3px 3px -4px black;
     word-wrap: break-word;
-    margin-left: 8px; }
+    margin-left: 8px;
+    max-width: 30em; }
+    @media (max-width: 950px) {
+      .message-detail .bubble,
+      .message-list .bubble {
+        max-width: calc(100% - 45px); } }
     .message-detail .bubble .content,
     .message-list .bubble .content {
       -webkit-user-select: text;
@@ -770,6 +783,10 @@ input.search {
   .message-list .outgoing .error.bubble {
     padding-left: 40px;
     background-position: 12px 9px; }
+  .message-detail .incoming .avatar, .message-detail .incoming .bubble,
+  .message-list .incoming .avatar,
+  .message-list .incoming .bubble {
+    float: left; }
   .message-detail .incoming .bubble,
   .message-list .incoming .bubble {
     color: #454545;