Mobile-friendly outputs control

src/scss/components/_output-control.scss

@@ -119,12 +119,62 @@
 	}
 
 	@include responsive($bp_medium){
+		position: absolute;
+		top: -10px;
+		right: 0px;
+		bottom: auto;
+		width: 100vw;
+
+		& > .control {
+			display: none;
+		}
+
 		&__items {
-			width: 86vw;
+			top: auto;
 			right: 0;
+			bottom: 0;
+			left: 0;
+			width: auto;
+			padding: 4px 0 0;
+			background: lighten($dark_grey, 17.5%);
+			border-radius: 0;
+			box-shadow: none;
+			max-height: 50vh;
+			overflow-y: auto;
 
 			&:after {
-				right: 9px;
+				display: none;
+			}
+
+			&--no-results {
+				display: none;
+			}
+		}
+
+		&__item {
+			@include clearfix();
+			padding: 10px 18px 6px;
+
+			&:not(:first-child){
+				border-color: rgba(255,255,255,0.05);
+			}
+
+			&__name {
+				color: $white;
+				font-weight: 400;
+				width: 30%;
+				float: left;
+				font-size: 12px;
+				padding-top: 2px;
+			}
+
+			&__controls {
+				width: 70%;
+				float: right;
+			}
+
+			&__mute.control {
+				color: $white;
 			}
 		}
 	}

src/scss/components/_playback-controls.scss

@@ -264,44 +264,31 @@
 		}
 
 		&.expanded {
-			height: 150px;
+			height: 135px;
 
 			section {
 				&.settings {
 					display: block;
 					right: 0;
-					bottom: 100px;
+					bottom: 90px;
+					padding-right: 10px;
 					text-align: right;
+					width: 100px;
 				}
 
 				&.volume {
 					width: auto;
 					display: block;
-					right: 110px;
-					left: 22px;
-					bottom: 100px;
+					right: 100px;
+					left: 10px;
+					bottom: 88px;
 				}
 
 				&.progress {
 					display: block;
 					bottom: 55px;
-					left: -10px;
-					right: -10px;
-				}
-			}
-
-			.output-control {
-				position: absolute;
-				bottom: 150px;
-				left: 0px;
-				right: 0px;
-
-				& > .control {
-					display: none;
-				}
-
-				&__items {
-					width: 100%;
+					left: -15px;
+					right: -15px;
 				}
 			}
 		}