Don't let the tutorial popovers get clipped on long names or small windows.

(imported from commit 069016ab38eb2d0d09b751ca22a53aba9d6980ba)

static/js/tutorial.js

@@ -192,7 +192,7 @@ function messages_in_viewport() {
 }
 
 function small_window() {
-    return $("#left-sidebar").width() < 175;
+    return !$("#left-sidebar").is(":visible");
 }
 
 function maybe_tweak_placement(placement) {
@@ -215,13 +215,15 @@ function maybe_tweak_placement(placement) {
 function create_and_show_popover(target_div, placement, title, content_template) {
     target_div.popover({
         placement: placement,
-        title: templates.render("tutorial_title", {title: title}),
-        content: templates.render(content_template),
+        title: templates.render("tutorial_title", {title: title,
+                                                   placement: placement}),
+        content: templates.render(content_template, {placement: placement}),
         trigger: "manual"
     });
     target_div.popover("show");
 
     $(".popover").css("z-index", 20001);
+    $(".popover-title").addClass("popover-" + placement);
 }
 
 exports.defer = function (callback) {

static/styles/zulip.css

@@ -1714,6 +1714,10 @@ table.floating_recipient {
     margin-bottom: 5px;
 }
 
+.popover-left, .popover-right {
+    max-width: 175px;
+}
+
 .hotkeys_table {
     float: left;
     width: 245px;
@@ -2446,10 +2450,6 @@ div.edit_bot {
     z-index: 20000;
 }
 
-.tutorial-popover {
-    width: 200px;
-}
-
 #tutorial-stream {
     width: 250px;
 }

static/templates/tutorial_home.handlebars

@@ -1,6 +1,6 @@
 {{! Contents of the "tutorial home" onboarding popup }}
 
-<div class="tutorial-popover" id="tutorial-home">
+<div class="tutorial-popover popover-{{placement}}" id="tutorial-home">
 
     <p>
         We show stream and private messages together, and time flows down. You

static/templates/tutorial_message.handlebars

@@ -1,6 +1,6 @@
 {{! Contents of the "tutorial message" onboarding popup }}
 
-<div class="tutorial-popover" id="tutorial-message">
+<div class="tutorial-popover popover-{{placement}}" id="tutorial-message">
     <p>
         Messages in Zulip go to a <b>stream</b> and have a <b>topic</b>.
     </p>

static/templates/tutorial_private.handlebars

@@ -1,6 +1,6 @@
 {{! Contents of the "tutorial private" onboarding popup }}
 
-<div id="tutorial-private">
+<div class="tutorial-popover popover-{{placement}}" id="tutorial-private">
 
     <p>
         You can also send private messages to one or more people.

static/templates/tutorial_reply.handlebars

@@ -1,6 +1,6 @@
 {{! Contents of the "tutorial reply" onboarding popup }}
 
-<div class="tutorial-popover" id="tutorial-reply">
+<div class="tutorial-popover popover-{{placement}}" id="tutorial-reply">
 
     <p>
         You can reply to any message by clicking on it. The stream and topic

static/templates/tutorial_stream.handlebars

@@ -1,6 +1,6 @@
 {{! Contents of the "tutorial stream" onboarding popup }}
 
-<div class="tutorial-popover" id="tutorial-stream">
+<div class="tutorial-popover popover-{{placement}}" id="tutorial-stream">
     <p>
         Streams are like chat rooms or mailing lists. You can easily join, leave, and make them.
     </p>

static/templates/tutorial_subject.handlebars

@@ -1,6 +1,6 @@
 {{! Contents of the "tutorial subject" onboarding popup }}
 
-<div class="tutorial-popover" id="tutorial-subject">
+<div class="tutorial-popover popover-{{placement}}" id="tutorial-subject">
 
     <p>
         The <b>topic</b> of a conversation is one or two words that describe

static/templates/tutorial_title.handlebars

@@ -1,3 +1,3 @@
 {{! Contents of the tutorial popup title}}
 
-<h4>{{title}}</h4>
+<h4 class="popover-{{placement}}">{{title}}</h4>

static/templates/tutorial_welcome.handlebars

@@ -1,6 +1,6 @@
 {{! Contents of the "tutorial welcome" onboarding popup }}
 
-<div class="tutorial-popover" id="tutorial-welcome">
+<div class="tutorial-popover popover-{{placement}}" id="tutorial-welcome">
     <p>
       Zulip isn't like other chat tools. Here are some things you need to know.
     </p>