Tweak how discussion sidebar displays on mobile

Give all items in an item list a class on their <li>. Super helpful for
styling

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)
     ]);
   }

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), ' ']);
 };

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) {

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) {