From 3aa72d2244962972cda7ad3f410ceeb64aed68e4 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 24 Aug 2016 16:19:24 -0700
Subject: [PATCH] Address large font size edge cases

Fix some visual bugs occuring at large font size:
  * Contact names break onto the next line after their avatars in
    message detail screen
  * Settings menu font-size failed to scale
  * Handle Content overflow in modals.

// FREEBIE
---
 background.html            |  2 +-
 js/views/inbox_view.js     |  6 +++---
 stylesheets/_debugLog.scss |  1 +
 stylesheets/_global.scss   |  8 ++++++--
 stylesheets/manifest.css   | 11 +++++++----
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/background.html b/background.html
index 5bd1fb5b5..acfa63679 100644
--- a/background.html
+++ b/background.html
@@ -10,7 +10,7 @@
               <div class='global-menu menu'>
                 <button class='hamburger' alt='signal menu'></button>
                 <ul class='menu-list'>
-                    <li class='settings'>{{ settings }}</li>
+                    <li class='showSettings'>{{ settings }}</li>
                     <li class='show-debug-log'>{{ submitDebugLog }}</li>
                     <li class='restart-signal'>{{ restartSignal }}</li>
                 </ul>
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 21c09643f..fc40d3ee7 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -70,7 +70,7 @@
             if (e.ctrlKey == true) {
                 if (e.originalEvent.deltaY > 0) {
                     if (this.currentSize > this.minSize) {
-                        this.currentSize--
+                        this.currentSize--;
                         this.render();
                     }
                 } else if (e.originalEvent.deltaY < 0) {
@@ -151,7 +151,7 @@
             'click .conversation': 'focusConversation',
             'click .global-menu .hamburger': 'toggleMenu',
             'click .show-debug-log': 'showDebugLog',
-            'click .settings': 'showSettings',
+            'click .showSettings': 'showSettings',
             'select .gutter .conversation-list-item': 'openConversation',
             'input input.search': 'filterContacts',
             'click .restart-signal': 'reloadBackgroundPage',
@@ -176,7 +176,7 @@
         showSettings: function() {
             var view = new Whisper.SettingsView().render();
             view.update();
-            view.$el.insertAfter(this.el);
+            view.$el.appendTo(this.el);
         },
         filterContacts: function(e) {
             this.searchView.filterContacts(e);
diff --git a/stylesheets/_debugLog.scss b/stylesheets/_debugLog.scss
index 409d88aa6..28c4af3a9 100644
--- a/stylesheets/_debugLog.scss
+++ b/stylesheets/_debugLog.scss
@@ -14,6 +14,7 @@
         flex-grow: 1;
         width: 100%;
         resize: none;
+        min-height: 100px;
       }
     }
   }
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 0e8072417..947029454 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -57,7 +57,10 @@ body {
   outline: 0;
 }
 
-button { cursor: pointer; }
+button {
+  cursor: pointer;
+  font-size: inherit;
+}
 a { color: $blue; }
 
 .inactive button.back {
@@ -305,7 +308,7 @@ $avatar-size: 44px;
   vertical-align: middle;
   display: inline-block;
   margin: 0 0 0 $left-margin;
-  width: calc(100% - #{$avatar-size} - #{$left-margin} - 4px);
+  width: calc(100% - #{$avatar-size} - #{$left-margin} - #{(4/14) + em});
   text-align: left;
 
   p {
@@ -417,6 +420,7 @@ $avatar-size: 44px;
   background-color: rgba(0, 0, 0, 0.3);
   padding: 0 20px;
   z-index: 100;
+  overflow-y: auto;
 
   .content {
     position: relative;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 5f197d628..2de66a541 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -61,7 +61,8 @@ body {
   outline: 0; }
 
 button {
-  cursor: pointer; }
+  cursor: pointer;
+  font-size: inherit; }
 
 a {
   color: #2090ea; }
@@ -276,7 +277,7 @@ img.emoji {
   vertical-align: middle;
   display: inline-block;
   margin: 0 0 0 8px;
-  width: calc(100% - 44px - 8px - 4px);
+  width: calc(100% - 44px - 8px - 0.28571em);
   text-align: left; }
   .contact-details p {
     overflow-x: hidden;
@@ -359,7 +360,8 @@ img.emoji {
   width: 100%;
   background-color: rgba(0, 0, 0, 0.3);
   padding: 0 20px;
-  z-index: 100; }
+  z-index: 100;
+  overflow-y: auto; }
   .modal .content {
     position: relative;
     max-width: 350px;
@@ -445,7 +447,8 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
     .debug-log.modal .content textarea {
       flex-grow: 1;
       width: 100%;
-      resize: none; }
+      resize: none;
+      min-height: 100px; }
 .debug-log .submit {
   border-radius: 5px;
   border: solid 1px #ccc;