diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
index 310a2669ff..57bcf8585c 100644
--- a/core/client/assets/sass/layouts/editor.scss
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -398,6 +398,7 @@ body.zen {
     right: 0;
     z-index: 900;
     box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
+    @include transform(translateZ(0));
 
     @include breakpoint($netbook) {font-weight: normal;}
 
@@ -440,14 +441,91 @@ body.zen {
     }
 }
 
+.extended-tags { // When the tag bar is exapanded
+    position: static;
+    min-height: 100%;
+    
+    #entry-tags {
+        &:after {
+            right: 10px;
+        }
+    }
+    .tags {
+        width: 281px;
+    }
+
+    .tag-label, .tag-label.touch {
+        color: #fff;
+    }
+
+    .tag-input {
+        width: 100%;
+        margin-top: 5px;
+        padding-top: 5px;
+        padding-left: 10px;
+        border-top: 1px solid $darkgrey;
+
+    }
+    .right {
+        display: none;
+    }
+}
+
 #entry-tags {
     position: absolute;
     top: 0;
     left: 0;
-    right: 165px;
+    right: 0;
     bottom: 0;
     text-transform: none;
     padding: 10px 0 0 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;
+        pointer-events: none;
+
+        @include breakpoint($mobile) {
+            right: 176px;
+        }
+    }
+
+    &:before {
+        right: auto;
+        left: 29px;
+        @include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
+    }
+}
+
+.tags {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+    max-width: 80%;
+    max-width: calc(100% - 320px);
+    height: 26px;
+    padding-left: 20px;
+    padding-bottom: 20px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+    @include transition(width 0.2s linear);
+
+    @include breakpoint($mobile) {
+        @include box-sizing(border-box);
+        display: block;
+        width: 115px;
+        max-width: inherit;
+        padding-bottom: 0;
+    }
 }
 
 .tag-label {
@@ -461,10 +539,15 @@ body.zen {
         cursor: pointer;
         color: $lightgrey;
     }
+
+    &.touch {
+        color: inherit;
+    }
 }
 
 .tag-input {
     display: inline-block;
+    vertical-align: top;
     color: $lightgrey;
     font-weight: 300;
     background: transparent;
@@ -480,11 +563,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: 
@@ -498,6 +581,7 @@ body.zen {
         @include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;}
 
     }
+
 }
 
 .suggestions {
diff --git a/core/client/views/editor-tag-widget.js b/core/client/views/editor-tag-widget.js
index 0fe20d8155..17e576ab5e 100644
--- a/core/client/views/editor-tag-widget.js
+++ b/core/client/views/editor-tag-widget.js
@@ -1,6 +1,6 @@
 // The Tag UI area associated with a post
 
-/*global window, document, $, _, Backbone, Ghost */
+/*global window, document, setTimeout, $, _, Backbone, Ghost */
 
 (function () {
     "use strict";
@@ -11,7 +11,8 @@
             'keyup [data-input-behaviour="tag"]': 'handleKeyup',
             'keydown [data-input-behaviour="tag"]': 'handleKeydown',
             'click ul.suggestions li': 'handleSuggestionClick',
-            'click .tags .tag': 'handleTagClick'
+            'click .tags .tag': 'handleTagClick',
+            'click .tag-label': 'mobileTags'
         },
 
         keys: {
@@ -37,7 +38,8 @@
         render: function () {
             var tags = this.model.get('tags'),
                 $tags = $('.tags'),
-                tagOffset;
+                tagOffset,
+                self = this;
 
             $tags.empty();
 
@@ -45,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);
                 });
             }
 
@@ -55,9 +58,48 @@
                 $('.tag-blocks').css({'left': tagOffset + 'px'});
             }
 
+            $(window).on('resize', self.resize).trigger('resize');
+
+            $('.tag-label').on('touchstart', function () {
+                $(this).addClass('touch');
+            });
+
             return this;
         },
 
+        mobileTags: function () {
+            var mq = window.matchMedia("(max-width: 400px)"),
+                publishBar = $("#publish-bar");
+            if (mq.matches) {
+
+                if (publishBar.hasClass("extended-tags")) {
+                    publishBar.css("top", "auto").animate({"height": "40px"}, 300, "swing", function () {
+                        $(this).removeClass("extended-tags");
+                        $(".tag-input").blur();
+                    });
+                } else {
+                    publishBar.animate({"top": 0, "height": $(window).height()}, 300, "swing", function () {
+                        $(this).addClass("extended-tags");
+                        $(".tag-input").focus();
+                    });
+                }
+
+                $(".tag-input").one("blur", function (e) {
+
+                    if (publishBar.hasClass("extended-tags") && !$(':hover').last().hasClass("tag")) {
+                        publishBar.css("top", "auto").animate({"height": "40px"}, 300, "swing", function () {
+                            $(this).removeClass("extended-tags");
+                            $(document.activeElement).blur();
+                            document.documentElement.style.display = "none";
+                            setTimeout(function () { document.documentElement.style.display = 'block'; }, 0);
+                        });
+                    }
+                });
+
+                window.scrollTo(0, 1);
+            }
+        },
+
         showSuggestions: function ($target, _searchTerm) {
             this.$suggestions.show();
             var searchTerm = _searchTerm.toLowerCase(),
@@ -186,10 +228,19 @@
             var $tag = $(e.currentTarget),
                 tag = {id: $tag.data('tag-id'), name: $tag.text()};
             $tag.remove();
-
+            window.scrollTo(0, 1);
             this.model.removeTag(tag);
         },
 
+        resize: _.throttle(function () {
+            var $tags = $('.tags');
+            if ($(window).width() > 400) {
+                $tags.css("max-width", $("#entry-tags").width() - 320);
+            } else {
+                $tags.css("max-width", "inherit");
+            }
+        }, 50),
+
         findMatchingTags: function (searchTerm) {
             var matchingTagModels,
                 self = this;
@@ -217,6 +268,8 @@
         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);
+            window.scrollTo(0, 1);
             this.model.addTag(tag);
 
             this.$('.tag-input').val('').focus();