diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
index 93aabf2fd4..9cad1b7d1e 100644
--- a/core/client/assets/sass/layouts/editor.scss
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -449,7 +449,7 @@ body.zen {
         }
     }
     .tags {
-        width: 261px;
+        width: 281px;
     }
 
     .tag-label, .tag-label.touch {
@@ -473,41 +473,52 @@ body.zen {
     position: absolute;
     top: 0;
     left: 0;
-    right: 165px;
+    right: 0;
     bottom: 0;
     text-transform: none;
     padding: 10px 0 0 0;
 
-    @include  breakpoint($mobile) {
-        right: 0;
+    &:after, &:before {
+        content: "";
+        position: fixed;
+        top: 10px;
+        right: 270px;
+        width: 20px;
+        height: 26px;
+        @include linear-gradient(left, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
+        z-index: 9999;
 
-        &:after, &:before {
-            content: "";
-            position: fixed;
-            top: 10px;
+        @include breakpoint($mobile) {
             right: 128px;
-            width: 20px;
-            height: 26px;
-            @include linear-gradient(left, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
-            z-index: 9999;
         }
+    }
 
-        &:before {
-            right: auto;
-            left: 29px;
-            @include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
-        }
+    &:before {
+        right: auto;
+        left: 29px;
+        @include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
     }
 }
 
 .tags {
+    @include box-sizing(border-box);
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+    max-width: 80%;
+    max-width: calc(100% - 300px);
+    height: 26px;
+    padding-left: 20px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    @include transition(width 0.2s linear);
+
     @include breakpoint($mobile) {
-        position: relative;
-        width: 156px;
-        height: 26px;
-        padding-left: 20px;
-        overflow-x: scroll;
-        @include transition(width 0.2s linear);
+        display: block;
+        width: 166px;
+        max-width: inherit;
     }
 }
 
@@ -530,6 +541,7 @@ body.zen {
 
 .tag-input {
     display: inline-block;
+    vertical-align: top;
     color: $lightgrey;
     font-weight: 300;
     background: transparent;
@@ -545,11 +557,11 @@ body.zen {
         text-shadow: rgba(255,255,255,0.15) 0 1px 0;
         @include transition;
     }
-    display: block;
-    float: left;
+    display: inline;
     margin-right: 5px;
     padding: 0 5px;
     color: $lightgrey;
+    white-space: nowrap;
     background: lighten($grey, 15%);
     border-radius: $rounded;
     box-shadow: 
@@ -564,10 +576,6 @@ body.zen {
 
     }
 
-    @include breakpoint($mobile) {
-        display: inline;
-        float: none;
-    }
 }
 
 .suggestions {
diff --git a/core/client/views/editor-tag-widget.js b/core/client/views/editor-tag-widget.js
index d64a02fcfc..8b7e055e42 100644
--- a/core/client/views/editor-tag-widget.js
+++ b/core/client/views/editor-tag-widget.js
@@ -38,7 +38,8 @@
         render: function () {
             var tags = this.model.get('tags'),
                 $tags = $('.tags'),
-                tagOffset;
+                tagOffset,
+                self = this;
 
             $tags.empty();
 
@@ -46,6 +47,7 @@
                 _.forEach(tags, function (tag) {
                     var $tag = $('<span class="tag" data-tag-id="' + tag.id + '">' + tag.name + '</span>');
                     $tags.append($tag);
+                    $("[data-tag-id=" + tag.id + "]")[0].scrollIntoView(true);
                 });
             }
 
@@ -56,6 +58,8 @@
                 $('.tag-blocks').css({'left': tagOffset + 'px'});
             }
 
+            $(window).on('resize', self.resize).trigger('resize');
+
             $('.tag-label').on('touchstart', function () {
                 $(this).addClass('touch');
             });
@@ -224,6 +228,15 @@
             this.model.removeTag(tag);
         },
 
+        resize: _.throttle(function () {
+            var $tags = $('.tags');
+            if ($(window).width() > 400) {
+                $tags.css("max-width", $("#entry-tags").width() - 300);
+            } else {
+                $tags.css("max-width", "inherit");
+            }
+        }, 50),
+
         findMatchingTags: function (searchTerm) {
             var matchingTagModels,
                 self = this;
@@ -251,6 +264,7 @@
         addTag: function (tag) {
             var $tag = $('<span class="tag" data-tag-id="' + tag.id + '">' + tag.name + '</span>');
             this.$('.tags').append($tag);
+            $(".tag").last()[0].scrollIntoView(true);
             this.model.addTag(tag);
 
             this.$('.tag-input').val('').focus();