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

@@ -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;

stylesheets/_global.scss

@@ -30,6 +30,7 @@ body {
 }
 
 #header {
+  max-width: 1300px;
   position: fixed;
   top: 1px;
   width: calc(100% - 2px);

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%);
 

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;