diff --git a/framework/core/js/lib/components/action-button.js b/framework/core/js/lib/components/action-button.js
index 6971ddc92..527c299aa 100644
--- a/framework/core/js/lib/components/action-button.js
+++ b/framework/core/js/lib/components/action-button.js
@@ -20,7 +20,7 @@ export default class ActionButton extends Component {
 
     attrs.href = attrs.href || 'javascript:;';
     return m('a'+(iconName ? '.has-icon' : ''), attrs, [
-      iconName ? icon(iconName+' icon') : '',
+      iconName ? icon(iconName+' icon') : '', ' ',
       m('span.label', label)
     ]);
   }
diff --git a/framework/core/js/lib/helpers/list-items.js b/framework/core/js/lib/helpers/list-items.js
index 41b1dd4da..b15e81dea 100644
--- a/framework/core/js/lib/helpers/list-items.js
+++ b/framework/core/js/lib/helpers/list-items.js
@@ -17,5 +17,5 @@ export default function listItems(array, noWrap) {
     }
   });
 
-  return newArray.map(item => [(noWrap && !isSeparator(item)) ? item : m('li', {className: item.wrapperClass || (item.props && item.props.wrapperClass) || (item.component && item.component.wrapperClass) || ''}, item), ' ']);
+  return newArray.map(item => [(noWrap && !isSeparator(item)) ? item : m('li', {className: 'item-'+item.itemName+' '+(item.wrapperClass || (item.props && item.props.wrapperClass) || (item.component && item.component.wrapperClass) || '')}, item), ' ']);
 };
diff --git a/framework/core/js/lib/utils/item-list.js b/framework/core/js/lib/utils/item-list.js
index 5ee67bf87..f119adf0f 100644
--- a/framework/core/js/lib/utils/item-list.js
+++ b/framework/core/js/lib/utils/item-list.js
@@ -22,6 +22,7 @@ export default class ItemList {
     var items = [];
     for (var i in this) {
       if (this.hasOwnProperty(i) && this[i] instanceof Item) {
+        this[i].content.itemName = i;
         items.push(this[i]);
       }
     }
@@ -49,6 +50,8 @@ export default class ItemList {
       // e.g. {before: ['foo', 'bar'], after: ['qux', 'qaz']}
       // This way extensions can make sure they are positioned where
       // they want to be relative to other extensions.
+      // Alternatively, it might be better to just have a numbered priority
+      // system, so extensions don't have to make awkward references to each other.
       if (key) {
         var index = array.indexOf(this[key]);
         if (index === -1) {
diff --git a/framework/core/less/forum/discussion.less b/framework/core/less/forum/discussion.less
index ef73dfac8..127275350 100644
--- a/framework/core/less/forum/discussion.less
+++ b/framework/core/less/forum/discussion.less
@@ -4,6 +4,7 @@
 .discussion-hero {
   & .badges {
     margin-right: 5px;
+    margin-bottom: -2px;
   }
   & .discussion-hero-items {
     padding: 0;
@@ -34,6 +35,22 @@
   }
 }
 
+@media @phone {
+  .discussion-nav {
+    margin: 0 -15px;
+    border-bottom: 1px solid @fl-body-secondary-color;
+
+    & > ul > li {
+      margin: 15px;
+      display: inline-block;
+
+      &.item-controls, &.item-scrubber {
+        margin: 0;
+        display: block;
+      }
+    }
+  }
+}
 @media @tablet, @desktop, @desktop-hd {
   .discussion-nav {
     float: right;
@@ -67,7 +84,9 @@
 // Stream
 
 .discussion-posts {
-  margin-top: 10px;
+  @media @tablet, @desktop, @desktop-hd {
+    margin-top: 10px;
+  }
 
   & .item {
     &:not(:last-child) {