Adjust active devices in dashboard

Added more white space inside the card to make it breathe more. Slightly reduced the playing media name size.

CONTRIBUTORS.md

@@ -56,6 +56,7 @@
  - [is343](https://github.com/is343)
  - [Meet Pandya](https://github.com/meet-k-pandya)
  - [Peter Spenler](https://github.com/peterspenler)
+ - [Vankerkom](https://github.com/vankerkom)
 
 # Emby Contributors
 

src/assets/css/dashboard.scss

@@ -334,7 +334,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .sessionAppInfo {
     flex-grow: 1;
-    padding: 0.5em;
+    padding: 1em;
     overflow: hidden;
 }
 
@@ -374,14 +374,18 @@ div[data-role=controlgroup] a.ui-btn-active {
 .sessionNowPlayingInfo {
     flex-grow: 1;
     text-overflow: ellipsis;
-    padding: 0.8em 0.5em;
+    padding: 1em;
+}
+
+.sessionNowPlayingName {
+    font-size: 0.8em;
 }
 
 .sessionNowPlayingTime {
     flex-shrink: 0;
     align-self: flex-end;
     text-overflow: ellipsis;
-    padding: 0.8em 0.5em;
+    padding: 1em;
 }
 
 .playbackProgress,

src/controllers/dashboard/dashboard.js

@@ -289,7 +289,7 @@ import confirm from '../../components/confirm/confirm';
                 html += '<div class="sessionNowPlayingDetails">';
                 const nowPlayingName = DashboardPage.getNowPlayingName(session);
                 html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
-                html += nowPlayingName.html;
+                html += '<span class="sessionNowPlayingName">' + nowPlayingName.html + '</span>';
                 html += '</div>';
                 html += '<div class="sessionNowPlayingTime">' + escapeHtml(DashboardPage.getSessionNowPlayingTime(session)) + '</div>';
                 html += '</div>';