fix layout issues for device cards on dashboard

src/css/dashboard.css

@@ -272,10 +272,9 @@ div[data-role=controlgroup] a.ui-btn-active {
     position: relative
 }
 
-.sessionAppInfo,
-.sessionNowPlayingInfo {
-    padding: .5em;
-    overflow: hidden
+.sessionAppInfo {
+    padding: 0.5em;
+    overflow: hidden;
 }
 
 .sessionCardButtons {
@@ -317,105 +316,60 @@ div[data-role=controlgroup] a.ui-btn-active {
     max-width: 200px
 }
 
-.sessionNowPlayingInfo {
+.sessionNowPlayingDetails {
+    display: flex;
     position: absolute;
-    left: 0;
-    bottom: 11px;
-    max-width: 50%;
-    -o-text-overflow: ellipsis;
-    text-overflow: ellipsis
+    bottom: 0px;
+    width: 100%;
+}
+
+.sessionNowPlayingInfo {
+    flex-grow: 1;
+    text-overflow: ellipsis;
+    padding: 0.8em 0.5em;
 }
 
 .sessionAppInfo img {
-    max-width: 32px;
-    max-height: 32px;
-    margin-right: 5px
-}
-
-.activeSession .playbackProgress {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 7px;
-    width: 100%;
-    opacity: .95
-}
-
-.activeSession:not(.playingSession) .sessionNowPlayingInfo {
-    bottom: 0
+    max-width: 40px;
+    max-height: 40px;
+    margin-right: 8px;
 }
 
 .sessionNowPlayingTime {
-    position: absolute;
-    right: 10px;
-    bottom: 19px
+    flex-shrink: 0;
+    align-self: flex-end;
+    text-overflow: ellipsis;
+    padding: 0.8em 0.5em;
 }
 
 .sessionNowPlayingStreamInfo {
-    white-space: nowrap
+    white-space: nowrap;
 }
 
+.activeSession .playbackProgress,
 .activeSession .transcodingProgress {
+    position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
-    height: 5px;
+    height: 6px;
     width: 100%;
-    opacity: .9;
-    position: absolute
 }
 
 .playbackProgress,
 .transcodingProgress {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    margin: 0 5px 0 0;
-    height: 14px;
-    border: 0 solid #222;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    width: 50px;
-    background: #000 !important
+    margin: 0px;
+    width: 100%;
+    background: transparent !important;
 }
 
-.playbackProgress::-webkit-progress-bar,
-.transcodingProgress::-webkit-progress-bar {
-    background: #000
+.playbackProgress > div {
+    z-index: 1000;
+    background-color: #00a4dc;
 }
 
-.transcodingSession .playbackProgress {
-    bottom: 5px
-}
-
-.transcodingProgress::-moz-progress-bar {
-    border-radius: .3em;
-    background-color: #dd4919
-}
-
-.transcodingProgress::-webkit-progress-value {
-    -webkit-border-radius: .3em;
-    border-radius: .3em;
-    background-color: #dd4919
-}
-
-.transcodingProgress[aria-valuenow]:before {
-    -webkit-border-radius: .3em;
-    border-radius: .3em;
-    background-color: #dd4919
-}
-
-.playbackProgress::-moz-progress-bar {
-    background-color: #00a4dc
-}
-
-.playbackProgress::-webkit-progress-value {
-    background-color: #00a4dc
-}
-
-.playbackProgress[aria-valuenow]:before {
-    background-color: #00a4dc
+.transcodingProgress > div {
+    background-color: #dd4919;
 }
 
 @media all and (max-width:34.375em) {