FIX: share popup on mobile layout went outside of viewport, and z-index was behind user avatars. Use a real link on touch devices instead of a text input.

app/assets/javascripts/discourse/templates/share.hbs

@@ -4,7 +4,10 @@
   <span class="date">{{displayDate}}</span>
 {{/if}}
 
-<div><input type='text' /></div>
+<div>
+  <input type='text' />
+  <div class="share-for-touch"><div class="overflow-ellipsis"><a></a></div></div>
+</div>
 
 {{each shareLinks itemView='share-link'}}
 

app/assets/javascripts/discourse/views/share.js.es6

@@ -28,6 +28,7 @@ export default Discourse.View.extend({
 
   linkChanged: function() {
     if (this.present('controller.link')) {
+      if (!this.capabilities.touch) {
         var $linkInput = $('#share-link input');
         $linkInput.val(this.get('controller.link'));
 
@@ -35,6 +36,11 @@ export default Discourse.View.extend({
         window.setTimeout(function() {
           $linkInput.select().focus();
         }, 160);
+      } else {
+        var $linkForTouch = $('#share-link .share-for-touch a');
+        $linkForTouch.attr('href', this.get('controller.link'));
+        $linkForTouch.html(this.get('controller.link'));
+      }
     }
   }.observes('controller.link'),
 
@@ -84,10 +90,11 @@ export default Discourse.View.extend({
         y = $currentTargetOffset.top + 10;
       }
 
-      $shareLink.css({
-        left: "" + x + "px",
-        top: "" + y + "px"
-      });
+      $shareLink.css({top: "" + y + "px"});
+
+      if (!Discourse.Mobile.mobileView) {
+        $shareLink.css({left: "" + x + "px"});
+      }
 
       shareView.set('controller.link', url);
       shareView.set('controller.postNumber', postNumber);

app/assets/stylesheets/common/base/share_link.scss

@@ -3,7 +3,7 @@
 #share-link {
   position: absolute;
   left: 20px;
-  z-index: 990;
+  z-index: 1200;
   box-shadow: 0 1px 5px rgba(0,0,0, .4);
   background-color: $secondary;
   padding: 6px 10px 10px 10px;
@@ -12,9 +12,12 @@
   &.visible {
     display: block;
   }
-  input[type=text] {
+  input[type=text], .share-for-touch .overflow-ellipsis {
     width: 96%;
   }
+  .share-for-touch {
+    margin: 14px 0;
+  }
   h3 {
     font-size: 13px;
   }
@@ -49,3 +52,11 @@
     margin-bottom: 10px;
   }
 }
+
+.discourse-no-touch #share-link .share-for-touch {
+  display: none;
+}
+
+.discourse-touch #share-link input[type=text] {
+  display: none;
+}

app/assets/stylesheets/mobile/topic-post.scss

@@ -384,6 +384,8 @@ iframe {
 
 #share-link {
   width: 290px;
+  left: auto;
+  right: 4px;
 }
 
 #selected-posts {