truncate artist/title rather than breaking Item rows at small page widths

frontend/src/components/Item/Item.jsx

@@ -80,7 +80,7 @@ class Item extends React.Component {
 
     return (
       <li className="queueItem" style={style}>
-        <FontAwesome name={platform} className="icon" fixedWidth />
+        <FontAwesome name={platform} className="icon platform-icon" size="lg" fixedWidth />
         <span className="info" title={text}>
           {text}
         </span>

frontend/src/components/Item/item.scss

@@ -7,9 +7,23 @@
 	padding-left: 1em;
 	padding-top: .5em;
 	padding-bottom: .5em;
+  display: flex;
+    
+  * {
+    flex-wrap:nowrap;
+  }
+
+  .platform-icon {
+    line-height: 1.5em;
+    flex: none;
+  }
 
 	span.info {
+    display: block;
+    flex: auto;
 		margin-left: 1em;
+    overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
 	}
 
@@ -21,11 +35,8 @@
 	}
 
   .itemControls {
+    flex: none;
     margin-right: 1em;
-    float: right;
-    &:after {
-      clear: both;
-    }
     button {
       display: inline-block;
       margin-top: 0;