Improve default UI for small or zoomed screens

customize.dist/src/less2/include/help.less

@@ -38,7 +38,7 @@
             color: @help-text-color;
             color: var(--help-text-color);
             margin: 0;
-            padding: 15px;
+            padding: 5px 15px;
             a {
                 color: @help-link-color;
                 color: var(--help-link-color);
@@ -52,7 +52,13 @@
             h3 {
                 font-size: 16px;
             }
-            ul, ol, p { margin: 0; }
+            ul, ol, p, h1, h2, h3 { margin: 0; }
+            &.cp-help-small {
+                ul {
+                    display: none;
+                }
+                cursor: pointer;
+            }
         }
     }
 }

www/common/common-ui-elements.js

@@ -1122,14 +1122,30 @@ define([
             common.setAttribute(['hideHelp', type], true);
         };
 
-        $(closeButton).click(function () { toggleHelp(true); });
+        var showMore = function () {
+            $(text).addClass("cp-help-small");
+            var $dot = $('<span>').text('...').appendTo($(text).find('h1'));
+            $(text).click(function () {
+                $(text).removeClass('cp-help-small');
+                $(text).off('click');
+                $dot.remove();
+            });
+        };
+
+        $(closeButton).click(function (e) {
+            e.stopPropagation();
+            toggleHelp(true);
+        });
         $toolbarButton.click(function () {
             toggleHelp();
         });
 
         common.getAttribute(['hideHelp', type], function (err, val) {
-            if ($(window).height() < 800 && $(window).width() < 800) { return void toggleHelp(true); }
-            if (val === true) { toggleHelp(true); }
+            //if ($(window).height() < 800 || $(window).width() < 800) { return void toggleHelp(true); }
+            if (val === true) { return void toggleHelp(true); }
+            if (!val && ($(window).height() < 800 || $(window).width() < 800)) {
+                return void showMore();
+            }
         });
 
         return {

www/common/toolbar3.js

@@ -481,7 +481,7 @@ Messenger, MessengerUI, Messages) {
         });
         show();
         Common.getAttribute(['toolbar', 'chat-drawer'], function (err, val) {
-            if (val === false || ($(window).height() < 800 && $(window).width() < 800)) {
+            if (val === false || ($(window).height() < 800 || $(window).width() < 800)) {
                 return void hide();
             }
             show();