Source icon on responsive

src/js/components/Track.js

@@ -87,6 +87,7 @@ export default class Track extends React.Component{
 						<span className="col name">
 							{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
 						</span>
+						{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(track.uri)} className="source" fixedWidth /> : null}
 						<span className="col artists">
 							{ track.artists ? <ArtistSentence artists={track.artists} /> : '-' }
 						</span>
@@ -110,6 +111,7 @@ export default class Track extends React.Component{
 					<span className="col name">
 						{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
 					</span>
+					{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(track.uri)} className="source" fixedWidth /> : null}
 					<span className="col artists">
 						{ track.artists ? <ArtistSentence artists={track.artists} /> : '-' }
 					</span>
@@ -136,7 +138,6 @@ export default class Track extends React.Component{
 					{ this.props.track.selected ? <FontAwesome name="check" className="select-state" fixedWidth /> : null }
 					{ this.props.track.playing ? <FontAwesome name="play" className="play-state" fixedWidth /> : null }
 					{ track_columns }
-					{ this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(track.uri)} className="source" fixedWidth /> : null }
 			</div>
 		);
 	}

src/scss/components/_lists.scss

@@ -221,7 +221,7 @@
 
 	@include responsive( $bp_medium ){
 		.list-item {
-			padding: 7px 10px 7px 16px !important;
+			padding: 7px 30px 7px 16px !important;
 
 			&.track {
 				.select-state,
@@ -230,6 +230,11 @@
 				}
 			}
 
+			.source {
+				position: static;
+				float: none;
+			}
+
 			.col {
 				&.name {
 					width: 90% !important;
@@ -245,8 +250,10 @@
 
 				&:not(.name):not(.duration){
 					color: $mid_grey;
-					display: inline-block;
+					display: inline;
 					width: auto !important;
+					float: none !important;
+					word-wrap: break-word;
 				}
 
 				&:not(.name):not(.duration):not(:nth-child(2)){

src/scss/components/_modal.scss

@@ -217,6 +217,7 @@
 					width: auto;
 					margin-left: 0 !important;
 					border-top: 0;
+					width: auto !important;
 
 					&:nth-child(1){
 						border-top: 1px solid $mid_grey;

src/scss/views/_search.scss

@@ -6,7 +6,7 @@
 
 		section {
 			.inner {
-				padding: 10px 10px 0 10px;
+				padding: 10px 20px 0 20px;
 			}
 		}
 	}